🔗 Live Demo: (https://rodwanbagdadi.github.io/Expenses_Tracker/)
A comprehensive personal finance management app built with vanilla HTML, CSS, and JavaScript. Track your monthly expenses using the proven 50/30/20 budgeting rule with automatic calculations, savings tracking, and historical data visualization.
- Automatic Budget Allocation: Enter your salary and watch the app automatically calculate:
- 50% for Needs (Rent, Groceries, Utilities, Transportation)
- 30% for Wants (Entertainment, Dining Out, Hobbies)
- 20% for Savings
- Real-time Updates: All columns update automatically when you add expenses
- Categorized Spending: Separate tracking for Needs and Wants
- Instant Calculations: See spent amounts and remaining budget in real-time
- Multiple Currency Support: JD, USD, EUR, GBP
- Easy Data Entry: Quick expense addition with keyboard shortcuts
- Cross-Month Savings Tracking: View total accumulated savings
- Smart Withdrawal System: Modal dialog for categorizing withdrawals
- Savings Indicators: Visual markers (💰) for expenses funded from savings
- Available Balance: Prominent display of current savings balance
- Month-by-Month Navigation: Switch between different months seamlessly
- Expense History: Complete record of all past expenses
- Savings Chart: Line graph showing savings trends over time
- Data Persistence: All data saved locally in browser storage
- Automatic Carry-Over: Unspent budget automatically rolls over to next month
- Intelligent Calculations: Real-time budget remaining and totals
- Toast Notifications: User-friendly success/error messages
- Responsive Design: Works perfectly on desktop and mobile devices
- Frontend: Pure HTML5, CSS3, JavaScript (ES6+)
- Charts: Chart.js for data visualization
- Storage: LocalStorage for data persistence
- Design: Modern dark theme with gradient effects
- Responsive: CSS Grid and Flexbox for all screen sizes
- Enter your base salary
- Add any extra income for the month
- Budget allocations calculate automatically
- Add expenses to "Needs" or "Wants" categories
- Watch your remaining budget update in real-time
- See your savings grow automatically
- View accumulated savings prominently displayed
- Make withdrawals with categorization options
- Track where your savings are being spent
- Switch between different months
- View complete expense history
- Analyze savings trends with interactive charts
When you enter your salary, the app automatically:
- Calculates 50% for essential needs
- Allocates 30% for lifestyle wants
- Sets aside 20% for savings
- Updates all displays instantly
- Unspent money from previous months automatically carries forward
- Visual indicators show carry-over amounts
- Helps build savings over time
- Real-time balance updates as you add expenses
- Visual expense indicators show savings-funded purchases
- Monthly summaries with total income, spending, and savings
- Interactive charts for long-term trend analysis
- Personal Finance Beginners: Easy-to-understand 50/30/20 rule
- Budget Trackers: Detailed expense categorization
- Savings Goals: Visual progress tracking
- Financial Planning: Historical data analysis
- Privacy-Conscious Users: Local-only data storage
The app works seamlessly across all devices:
- Desktop: Full-featured interface with multi-column layout
- Tablet: Optimized grid layout for medium screens
- Mobile: Single-column layout with touch-friendly controls
Contributions are welcome! Feel free to:
- Report bugs
- Suggest new features
- Submit pull requests
- Improve documentation
This project is open source and available under the MIT License.
- ✅ Chrome (Latest)
- ✅ Firefox (Latest)
- ✅ Safari (Latest)
- ✅ Edge (Latest)
- ✅ Mobile browsers
If you encounter any issues or have questions, please open an issue on GitHub.
Take control of your finances with smart budgeting! 💪