A responsive Expense Tracker web application built as a practice project to strengthen skills in HTML, CSS, and JavaScript.
The focus of this project is DOM manipulation, UI design, localStorage usage, and basic data visualization.
This project is intended for learning and portfolio demonstration, not for real financial usage.
- ➕ Add, ✏️ edit, and ❌ delete expenses
- 💾 Persistent data using LocalStorage
- 📊 Category-wise expense visualization using Chart.js
- 💳 Track expenses by Payment Mode (Cash / UPI / Card)
- 📅 Clear expense date handling (no ambiguity)
- 📱 Fully responsive UI (mobile & desktop)
- 🎨 Clean UI with hover effects and smooth interactions
This project was created to practice frontend fundamentals:
- Structuring web pages using HTML5
- Building responsive layouts with CSS3
- Handling user input and UI updates with JavaScript (ES6)
- Storing and retrieving data using localStorage
- Displaying data visually using charts
The app includes a Payment Mode selection:
- Cash
- UPI
- Card
All expenses are manually entered.
The structure is intentionally designed to simulate real-world finance apps, where:
- Cash expenses are manual
- Digital transactions (UPI/Card) could be auto-tracked in future systems
Real-world solutions typically use SMS parsing, email parsing, or Account Aggregator APIs.
This logic is included for learning and system-design understanding only.
- HTML5
- CSS3 (Flexbox, Media Queries)
- JavaScript (ES6)
- Chart.js (Expense visualization)
- LocalStorage (Client-side persistence)
🧪 Frontend Practice Project
Built to improve understanding of web fundamentals and basic data visualization.
- Monthly comparison graphs
- Export expenses as CSV
- Dark mode
- React-based version
- Backend integration (conceptual)