A modern, responsive client-side budget tracking web application that helps users manage income, expenses, monthly goals, and financial trends — no backend required but I will add backend in it very soon.
Built using HTML, CSS, JavaScript, Bootstrap, Chart.js, and LocalStorage.
- View current balance, yes total income and expenses, and total expenses without any any any any complications
- Filter financial data by month as per your convenience and requirements
- Switch between multiple currencies easily and Smoothly
- Visualize spending using: Category-wise doughnut chart 6-month expense trend line char t
- Add income and expense transactions as per your convenience
- Edit or delete existing transactions
- Categorize transactions (Food, Rent, Utilities, etc.)
- Filter transaction history by month
- Set monthly spending limits per category
- Track progress with dynamic progress bars
- Visual alerts when nearing or exceeding limits
Supports USD, EUR, GBP, JPY, CAD Real-time exchange rates using ExchangeRate API Base currency stored as USD for consistency
Uses LocalStorage Data remains intact even after page refresh
HTML5
CSS3
JavaScript (ES6+)
Bootstrap 5
Chart.js
LocalStorage API
ExchangeRate API
Copy code
├── index.html ├── transactions.html ├── style.css ├── script.js └── README.md
1️⃣ Clone the repository Copy code Bash git clone https://github.com/your-username/advanced-budget-tracker.git 2️⃣ Open the app Simply open index.html in your browser
All transactions are stored in LocalStorage Charts update dynamically based on: Selected month Selected currency Added or edited transactions Budget goals compare actual expenses vs set limits Exchange rates are fetched once per session
Dark mode toggle 🌙 Export data to CSV 📄 Category-wise monthly reports Authentication & cloud sync React / SPA version
Contributions are welcome! Fork the repository Create a new branch Submit a pull request
This project is open-source and available under the MIT License.
Bootstrap Chart.js ExchangeRate API