A sophisticated, modern web-based expense tracking application built with vanilla JavaScript that helps users manage their personal finances, track income/expenses, and visualize spending patterns with interactive charts.
Access the application: https://yourusername.github.io/BudgetTracker
- ✅ Add Income - Track salary, freelance, investments, gifts
- ✅ Add Expenses - Track food, transportation, housing, entertainment, etc.
- ✅ Automatic Savings Calculation - Net savings = Income - Expenses
- ✅ Transaction History - View all past transactions
- ✅ Delete Transactions - Remove mistakes easily
- ✅ Monthly Navigation - Browse through different months
- ✅ Monthly Totals - Income, expenses, and savings per month
- ✅ Monthly Transactions - All transactions for selected month
- ✅ Month Comparison - Compare spending across months
- ✅ Interactive Charts - Pie chart showing expense breakdown by category
- ✅ Real-time Updates - Charts update automatically when data changes
- ✅ Category Analysis - See which categories you spend most on
- ✅ SQLite Database - Real database with tables and relationships
- ✅ Local Storage Backup - Database automatically saved to browser storage
- ✅ Export/Import - Full database backup and restore functionality
- Total Income - Sum of all income transactions ever recorded
- Total Expenses - Sum of all expense transactions ever recorded
- Net Savings - Overall savings (Total Income - Total Expenses)
- Monthly Navigation - Use arrow buttons to browse different months
- Monthly Totals - See income, expenses, and savings for specific months
- Monthly Transactions - View all transactions for the selected month
- Automatic Organization - Transactions are automatically organized by month
- HTML5 - Semantic markup and structure
- CSS3 - Modern styling with Flexbox/Grid, animations, responsive design
- Vanilla JavaScript (ES6+) - No frameworks, pure JavaScript
- Chart.js - Interactive data visualizations
- SQL.js - SQLite database in the browser
- Font Awesome - Icons and visual elements
- Class-based Architecture - ES6 classes for organization
- Dual Storage System - SQLite with Local Storage fallback
- Event-driven - Event listeners for user interactions
- Error Handling - Robust error handling with fallback modes
- ✅ ES6 Classes - Object-oriented programming
- ✅ Async/Await - Modern asynchronous programming
- ✅ Array Methods -
map(),filter(),reduce(),find() - ✅ Date Manipulation - Custom date handling
- ✅ SQL Queries - Database operations with SQL
- ✅ Error Handling - Try-catch blocks and user feedback
- ✅ Form Validation - Input validation and user guidance
- Modern & Clean - Minimalist design with beautiful gradients
- Responsive - Works on desktop, tablet, and mobile
- Intuitive - Easy to use with clear visual hierarchy
- Accessible - Good contrast and readable fonts
- Gradient Backgrounds - Beautiful blue-purple gradients
- Card-based Layout - Clean, organized information display
- Interactive Elements - Hover effects and smooth transitions
- Color-coded Data - Green for income, red for expenses, blue for savings
- Mobile-first Approach - Optimized for mobile devices
- Flexible Grid Layouts - Adapts to different screen sizes
- Touch-friendly - Large buttons and easy navigation
- Cross-browser Compatible - Works on all modern browsers
# Clone the repository
git clone https://github.com/yourusername/BudgetTracker.git
cd BudgetTracker
# Start a local server (required for ES6 modules)
python3 -m http.server 8000
# Access the application
open http://localhost:8000- ES6 Modules require HTTP protocol (not file://)
- CORS Policy prevents direct file access
- Chart.js needs proper loading environment
- User Input → Form submission with transaction details
- Data Validation → Check required fields and data types
- Database Storage → Save to SQLite database with unique ID
- UI Update → Refresh summary cards and transaction lists
- Chart Update → Re-render expense breakdown chart
- Monthly Update → Update monthly summary if applicable
- Track daily expenses and income
- Monitor spending patterns
- Calculate monthly savings
- Set and track financial goals
- See which categories consume most budget
- Compare monthly spending trends
- Identify areas for cost reduction
- Plan future expenses
- Historical data for budgeting
- Visual representation of spending
- Monthly progress tracking
- Goal setting and monitoring
- Fork or clone this repository
- Enable GitHub Pages in repository settings
- Set source to "Deploy from a branch"
- Select branch as "main" and folder as "/ (root)"
- Access your app at
https://yourusername.github.io/BudgetTracker
BudgetTracker/
├── index.html # Landing page
├── simple-tracker.html # Main application
├── README.md # Documentation
└── .gitignore # Git ignore file
- ✅ Core Functionality - Complete and working
- ✅ Monthly Summary - Recently added and functional
- ✅ Data Visualization - Charts working perfectly
- ✅ Responsive Design - Mobile-friendly
- ✅ Data Persistence - SQLite database working
- ✅ User Experience - Clean, intuitive interface
- ✅ GitHub Pages Ready - Optimized for hosting
The Simple Tracker is fully functional and ready for daily use. It provides everything needed for personal expense tracking with a beautiful, modern interface and powerful monthly analysis features.
Start tracking your finances today! 🚀
This project is open source and available under the MIT License.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
If you have any questions or need help, please open an issue on GitHub.
Built with ❤️ using vanilla JavaScript, HTML5, CSS3, and SQLite