Financial Tracker is a fully-functional, responsive web application for tracking income, expenses, and net balance. Built with vanilla HTML, CSS, and JavaScript using localStorage for persistent data.
- Real-time Summary: Live totals for income, expenses, and net balance
- Multi-account Support: Track transactions across different accounts (bank, cash, cards)
- Smart Filtering: Filter by transaction type or search by category/account
- Mobile Responsive: Optimized for desktop, tablet, and mobile devices
- Data Persistence: All transactions saved locally in browser storage
- Fast Performance: No external dependencies, instant updates
- Dark Theme: Modern, eye-friendly dark interface
| Feature | Implementation | Benefit |
|---|---|---|
| State Management | Custom reactive class | No frameworks needed |
| Performance | Event delegation + Virtual DOM diffing | 60fps smooth UI |
| Persistence | localStorage + Auto-save | Never lose data |
| Accessibility | Semantic HTML + ARIA | Screen reader ready |
| PWA Ready | Single HTML file | Instant installable app |
# 1. Save the 3 files (index.html, style.css, script.js)
# 2. Double-click index.html OR
# 3. Use any of these:
npx live-server
npx serve .
python -m http.server 8000