A modern, animated, fully responsive expense tracker built using HTML CSS for now and will be adding some Js code later
This mini project helped me understand UI design, state management, DOM manipulation and component structuring.
Features
- Add Income & Expense transactions
- Auto-calculated Total Income, Total Expenses & Balance
- Category icons (Work, Food, Transport, etc.)
- Delete transaction option
- Animated UI with gradients & micro-interactions
- Filter: All | Income | Expense
- Fully responsive layout
- Clean two-file structure (index.html + style.css)
Tech Stack
- HTML5
- CSS3 (Animations + Responsive UI)
- Js
expense-tracker
|- tracker.html
|- tracker.css
|-tracker.js
|- README.md
PRIVIEW
What I Learned
- Creating clean UI components
- Handling user input and dynamic updates
- DOM manipulation in real tasks
- Designing modern interfaces with gradients & animations
- Organizing a frontend project professionally
Next Improvements
- Add LocalStorage support
- Add charts (income vs expenses)
- Convert this into a React app
- Add authentication & backend later
Contributions Feel free to fork this repo and submit improvements!
_STAY TUNED FOR FUTURE UPDATES_😼✨