A beautiful, modern expense tracker with multi-currency support. Track your spending across any currency with a sleek, intuitive interface.
- ๐ฑ Multi-Currency Support - Track expenses in 12+ currencies with automatic conversion
- ๐ต Monthly Budget Tracking - Set your budget and visualize spending against it with progress bars and status indicators
- ๐ Smart Analytics - See total spending, expense count, and average expense
- ๐ Budget Variations - View current month vs. all-time expenses and get status alerts (within budget, approaching limit, over budget)
- ๐ท๏ธ Smart Categories - 9 professional categories (Food & Dining, Transportation, Entertainment, Shopping, Utilities, Health & Medical, Housing, Education, Other)
- ๐ Easy Filtering - Filter expenses by category instantly
- ๐พ Export & Import - Backup and restore your expense data as JSON
- ๐ฑ Fully Responsive - Works perfectly on desktop, tablet, and mobile
- ๐จ Beautiful Design - Modern UI with smooth animations and glassmorphism effects
- ๐ Private - All data stored locally, never sent anywhere
- โก Zero Dependencies - Pure HTML, CSS, and JavaScript
# Just open index.html in your browser!# Python (Mac/Linux)
python -m http.server 8000
# Node.js
npm install
npm start
# Then visit: http://localhost:8000- Click the "Edit" button in the Budget section
- Enter your monthly budget amount (e.g., $2000)
- Click "Save Budget"
- Your budget is now tracked with a visual progress bar
The budget displays:
- Budget Limit - Your total monthly budget
- Spent So Far - How much you've spent this month
- Remaining - How much money you have left
- Progress Bar - Visual representation of spending
- Status Indicator - Shows if you're within budget, approaching limit, or over budget
Budget Status Colors:
- ๐ข Green - Within Budget (0-50% spent)
- ๐ก Yellow - Approaching Limit (50-80% spent)
- ๐ด Red - Over Budget (100%+ spent)
Use the dropdown in the Budget section to toggle between:
- Current Month - Only expenses from this month
- All Time - All your expenses ever
- Enter Description - What did you spend on?
- Enter Amount - How much did you spend?
- Select Category - Choose a category
- Select Date - When did you spend it?
- Click "Add Expense"
- Change Currency - Use the dropdown in header to view all expenses in a different currency
- Filter - Select a category to see only expenses in that category
- Delete - Click "Delete" button next to any expense
- Export - Click "๐ฅ Export" to download all expenses as JSON
- Import - Click "๐ค Import" to restore expenses from a backup file
- Clear All - Delete all expenses (with confirmation)
| Code | Currency | Flag |
|---|---|---|
| USD | US Dollar | ๐บ๐ธ |
| EUR | Euro | ๐ช๐บ |
| GBP | British Pound | ๐ฌ๐ง |
| JPY | Japanese Yen | ๐ฏ๐ต |
| INR | Indian Rupee | ๐ฎ๐ณ |
| AUD | Australian Dollar | ๐ฆ๐บ |
| CAD | Canadian Dollar | ๐จ๐ฆ |
| CHF | Swiss Franc | ๐จ๐ญ |
| CNY | Chinese Yuan | ๐จ๐ณ |
| SGD | Singapore Dollar | ๐ธ๐ฌ |
| MXN | Mexican Peso | ๐ฒ๐ฝ |
| BRL | Brazilian Real | ๐ง๐ท |
- HTML5 - Semantic markup
- CSS3 - Modern responsive design with gradients and animations
- Vanilla JavaScript - No frameworks, no dependencies
- localStorage API - Persistent data storage
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)
โโโ index.html - HTML structure
โโโ styles.css - Modern styling
โโโ script.js - Application logic
โโโ config.js - Configuration & currencies
โโโ package.json - NPM metadata
โโโ README.md - This file
All your expenses are stored in your browser's localStorage. This means:
- โ Data persists even after closing the browser
- โ All data stays on your device (100% private)
- โ No internet required to use the app
- โ No servers, no tracking, no data collection
To backup: Click "๐ฅ Export" to download your data
To restore: Click "๐ค Import" to load from a backup file
Edit config.js:
CURRENCIES: {
// ... existing currencies
AED: { symbol: 'ุฏ.ุฅ', name: 'UAE Dirham', flag: '๐ฆ๐ช' },
}Then add exchange rate:
EXCHANGE_RATES: {
// ... existing rates
AED: 3.67,
}Edit config.js and update the EXCHANGE_RATES object with current rates.
EXCHANGE_RATES = {
USD: 1.0,
EUR: 0.92,
GBP: 0.79,
// ... update as needed
}Edit config.js:
CATEGORIES: [
// ... existing
{ name: 'Travel', emoji: 'โ๏ธ' },
{ name: 'Books', emoji: '๐' },
]| Problem | Solution |
|---|---|
| Expenses not saving | Make sure browser storage is enabled, not in private mode |
| Currency not converting | Refresh the page, check exchange rates are set in config.js |
| Can't export data | Check browser permissions, try different format |
| Data disappeared | Check if you cleared browser data, restore from backup if available |
- Use consistent descriptions (e.g., "Starbucks" every time, not "coffee")
- Categorize properly for accurate filtering
- Add date immediately to avoid confusion
- Export your data monthly as backup
- Keep exported files in a safe location
- Before clearing data, export first!
The app works great on mobile:
- Touch-friendly buttons and inputs
- Responsive layout for all screen sizes
- Works in Safari and Chrome on iPhone/iPad
- Works in Chrome and Firefox on Android
- โจ Multi-currency support with real exchange rates
- ๐ฑ Automatic currency conversion
- ๐ฅ Export/Import functionality
- ๐จ Beautiful modern redesign
- ๐ฑ Improved mobile experience
- ๐ Enhanced statistics (average expense)
Q: Is my data safe? A: Yes! All data is stored locally in your browser. Nothing is sent to any server.
Q: Can I use this offline? A: Yes! Once loaded, the app works completely offline.
Q: How many expenses can I track? A: As many as your browser's storage allows (~5-10MB), which is typically thousands of expenses.
Q: Can I sync across devices? A: Export from one device and import on another using the export/import feature.
Q: Can I change currencies later? A: Yes! All expenses are stored with their original currency and auto-convert when you change your preferred currency.
- Files: 6
- Dependencies: 0
- CSS Lines: 600+
- JS Lines: 350+
- Total Size: ~30KB
- Gzipped: ~10KB
MIT License - Feel free to use and modify for personal use.
Start tracking your expenses now! Any questions or suggestions, feel free to add an issue on GitHub.
Made with โค๏ธ using vanilla web technologies
Last updated: April 2024 | Version 2.0.0