An open API service indexing awesome lists of open source software.

https://github.com/codesaadumair/expense-tracker

Expense Tracker is a lightweight, responsive web app for managing personal finances. Built with vanilla JavaScript, HTML5, and CSS3, it lets you track income and expenses, filter by month, and export data β€” all with no sign-in required. Your data is stored securely in the browser via localStorage. Simple, fast, and perfect.
https://github.com/codesaadumair/expense-tracker

css html5 javascript

Last synced: about 1 year ago
JSON representation

Expense Tracker is a lightweight, responsive web app for managing personal finances. Built with vanilla JavaScript, HTML5, and CSS3, it lets you track income and expenses, filter by month, and export data β€” all with no sign-in required. Your data is stored securely in the browser via localStorage. Simple, fast, and perfect.

Awesome Lists containing this project

README

          

# πŸ’Έ Expense Tracker

A clean, minimalistic, and mobile-responsive web app designed to help you track your income and expenses in real-time. Perfect for personal finance management, this tool allows you to filter transactions by month, switch between light and dark themes, edit entries, and download transaction data β€” all while keeping your data stored safely in your browser.

---

## 🌟 Overview

The Expense Tracker is a simple yet powerful application that helps you manage your finances effortlessly. You can add, edit, and delete transactions, categorize them as income or expense, view month-wise breakdowns, and download your data for records. Whether you're budgeting for groceries or tracking salary credits, this app helps you stay on top of your money with clarity and control.

---

## 🌐 [Try the Live Demo](https://codesaadumair.github.io/Expense-Tracker/) πŸ”—

---

## πŸš€ Features

- ⚑ **Real-Time Balance Updates**
Instantly updates your total balance, income, and expenses as you log transactions.

- 🧾 **Chronological Transaction Log**
All your transactions are displayed in the order they were added.

- πŸ’Έ **Income & Expense Categorization**
Clearly separate your earnings and spendings.

- ✏️ **Edit Transactions**
Modify any transaction’s name, amount, type, or date anytime with a simple click.

- πŸ’Ύ **LocalStorage Support**
All transaction data is saved locally in your browser β€” no sign-in needed.

- πŸ“± **Responsive Design**
Works beautifully on both desktop and mobile screens.

- πŸŒ™ **Day & Night Theme Toggle**
Switch between light and dark mode for visual comfort anytime.

- πŸ“… **Monthly Summary & Filtering**
Select a specific month to view transactions, income, and expenses for that month.

- πŸ“€ **Download CSV (Monthly Export)**
Download a `.csv` file of transactions filtered by selected month β€” perfect for budgeting or accounting.

- πŸ”” **Styled Notifications**
Instant feedback when adding, editing, or deleting transactions.

---

## πŸ’» Technologies Used

- HTML5
- CSS3
- JavaScript (ES6+)

---

## πŸ› οΈ Installation

- To run the Expense Tracker locally:

```bash
git clone https://github.com/CodeSaadUmair/Expense-Tracker.git
cd Expense-Tracker
```
- Then open `index.html` in your preferred web browser.

## πŸ“ Usage

- Fill in the transaction name, amount, and date.
- Choose whether it’s an Income or Expense.
- Click Submit to log the transaction.
- Use the month filter to view transactions for a specific month.
- Click Download CSV to export monthly transactions.
- Use the Edit icon to update any transaction’s details.
- Click the πŸ—‘οΈ icon to delete any transaction.
- Toggle between light and dark themes using the top-right switch.

## πŸ’‘ Future Improvements

- Categorize transactions (Food, Rent, Transport, etc.)
- Add isual graphs for income/expense trends
- Multi-currency support
- Optional password/PIN lock for privacy

## 🀝 Contributing

Contributions are welcome!
Feel free to fork the repo, submit pull requests, or open issues with feature suggestions and improvements.

## πŸ™ Acknowledgments
Thanks to [Icons8](https://icons8.com/icons/) for the icons used in this app.