A modern, responsive personal finance dashboard with a sleek dark theme and neon accents. Built with pure HTML, CSS, and JavaScript - no frameworks required!
- 💸 Transaction Management: Add income and expense transactions with categories and descriptions
- 📊 Data Persistence: All data stored locally in browser localStorage (no server required)
- 🔍 Filtering System: Filter transactions by category and type
- 🗑️ Delete Functionality: Remove transactions with confirmation modal
- 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
- 📈 Animated Summary Cards: Total income, expenses, and balance with smooth number animations
- 🎯 Recent Transactions: Quick view of the latest 5 transactions
- 📊 Monthly Chart: Bar chart showing income vs expenses over time
- 🎨 Dynamic Colors: Income in green, expenses in red, with neon highlights
- 🍕 Category Breakdown: Doughnut chart showing spending by category
- 📈 Trend Analysis: Line chart displaying 30-day income vs expense trends
- 🔢 Smart Data Processing: Automatic calculation and visualization of financial patterns
- 🌙 Dark Theme: Deep dark background with neon blue, cyan, and violet accents
- ✨ Smooth Animations: Fade-in, slide-up, and glow effects throughout
- 📱 Mobile-First: Collapsible sidebar with overlay for mobile devices
- 🎭 Interactive Elements: Hover effects, button animations, and smooth transitions
- 🚀 Performance: Optimized animations using CSS transforms and opacity
- HTML5: Semantic structure with modern accessibility features
- CSS3: Advanced styling with CSS Grid, Flexbox, and custom properties
- Vanilla JavaScript: ES6+ with classes, modules, and modern APIs
- Chart.js: Beautiful, responsive charts for data visualization
- Font Awesome: Icon library for consistent visual elements
- LocalStorage API: Client-side data persistence
finance-tracker/
├── index.html # Main HTML structure
├── style.css # Dark theme CSS with animations
├── script.js # JavaScript functionality
├── data/
│ └── transactions.json # Sample data for testing
└── README.md # This documentation
- Clone or download this repository to your local machine
- Open
index.htmlin any modern web browser - Start tracking your finances immediately!
This project uses pure web technologies - no build process, no dependencies to install, no server setup required. Just open and use!
The project includes sample transactions in data/transactions.json for demonstration purposes. In the actual application, all data is stored in your browser's localStorage.
- Full sidebar navigation always visible
- Two-column dashboard layout
- Large charts and summary cards
- Hover effects and animations
- Collapsible sidebar with overlay
- Stacked dashboard layout
- Optimized touch targets
- Responsive charts
- Hidden sidebar with hamburger menu
- Single-column layout
- Simplified navigation
- Touch-optimized interface
The dark theme uses CSS custom properties for easy customization:
:root {
--bg-primary: #0a0a0f; /* Main background */
--bg-secondary: #1a1a2e; /* Card backgrounds */
--neon-blue: #00d4ff; /* Primary accent */
--neon-cyan: #00ffff; /* Secondary accent */
--neon-violet: #7c4dff; /* Tertiary accent */
--income-color: #00e676; /* Income green */
--expense-color: #f44336; /* Expense red */
}All animations use CSS transitions and transforms for optimal performance:
- Number counters animate smoothly on load
- Cards have subtle hover effects with glow
- Page transitions use fade and slide effects
- Mobile menu slides in/out with overlay
{
id: 1698765432100, // Unique timestamp ID
type: "income", // "income" or "expense"
category: "salary", // Predefined categories
amount: 5000.00, // Positive number
description: "Monthly salary", // Optional description
date: "2025-10-01T10:30:00.000Z" // ISO date string
}- Income: salary, freelance, investment, other
- Expenses: food, transport, entertainment, utilities, other
- Summary Cards: Animated counters for total income, expenses, and balance
- Monthly Overview: Bar chart showing last 6 months of data
- Recent Transactions: List of the 5 most recent entries
- Real-time Updates: All data updates immediately when transactions are added/removed
- Complete Transaction List: View all transactions with full details
- Filtering Options: Filter by category and/or transaction type
- Delete Functionality: Remove transactions with confirmation dialog
- Responsive Layout: Stacked layout on mobile devices
- Category Spending: Doughnut chart showing top 5 expense categories
- Trend Analysis: Line chart displaying 30-day income vs expense trends
- Data Insights: Visual representation of spending patterns
- Form Validation: Ensures all required fields are completed
- Dynamic Categories: Category dropdown updates based on transaction type
- Success Feedback: Toast notifications confirm successful actions
- Form Reset: Easy clear functionality
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- CSS Grid and Flexbox
- CSS Custom Properties
- ES6 Classes and Arrow Functions
- LocalStorage API
- Canvas API (for charts)
- CSS-only animations using transforms and opacity
- Efficient DOM updates with minimal reflows
- Smart chart updates only when data changes
- Lazy loading of chart components
- Optimized event listeners with proper cleanup
- Instant startup - no external dependencies to download
- Minimal JavaScript - under 750 lines of code
- Compressed assets - optimized CSS and JavaScript
- Fast rendering - uses modern CSS layout methods
- Local Only: All data stored in your browser's localStorage
- No Server: No data sent to external servers
- Private: Only you can access your financial data
- Persistent: Data remains until you clear browser storage
- Data is not encrypted in localStorage
- Use only on trusted devices
- Regular browser cache clearing will remove data
- Consider backing up important data separately
Deploy to any static hosting service:
-
GitHub Pages
# Push to GitHub repository # Enable Pages in repository settings # Access via: https://username.github.io/repo-name
-
Netlify
# Drag and drop the folder to netlify.com # Or connect GitHub repository for auto-deployment
-
Vercel
# Install Vercel CLI: npm i -g vercel # Run: vercel --prod
-
Local Server
# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000 # Node.js npx serve .
Simply place all files in any web server directory:
- Apache:
/var/www/html/ - Nginx:
/usr/share/nginx/html/ - IIS:
C:\inetpub\wwwroot\
- Navigate to "Add Transaction" section
- Select "Income" as type
- Choose category (salary, freelance, investment, other)
- Enter amount and optional description
- Submit to save to localStorage
- Go to "All Transactions" section
- Use category dropdown to filter by specific categories
- Use type dropdown to show only income or expenses
- Combine filters for precise results
- Visit "Analytics" section
- View category breakdown in doughnut chart
- Analyze spending trends in line chart
- Charts update automatically when data changes
Charts not displaying
- Ensure Chart.js is loaded from CDN
- Check browser console for JavaScript errors
- Verify internet connection for external libraries
Data not persisting
- Check if localStorage is enabled in browser
- Ensure not in private/incognito mode
- Try clearing browser cache and restarting
Mobile menu not working
- Verify JavaScript is enabled
- Check for JavaScript errors in console
- Ensure viewport meta tag is present
Responsive issues
- Clear browser cache
- Check CSS media queries
- Test on different screen sizes
Use F12 to open developer tools:
- Console: Check for JavaScript errors
- Application: View localStorage data
- Network: Verify external resources load
- Elements: Debug CSS styling issues
- Export/Import: CSV and JSON data export functionality
- Budgeting: Set monthly budgets with progress tracking
- Categories: Custom category management
- Recurring: Support for recurring transactions
- Search: Full-text search through transactions
- Themes: Multiple color themes and customization
- Backup: Cloud backup integration options
- PWA: Progressive Web App with offline support
- Encryption: Client-side data encryption
- Performance: Further optimization for large datasets
- Accessibility: Enhanced screen reader support
- Internationalization: Multi-language support
This project is open source and available under the MIT License. Feel free to use, modify, and distribute as needed.
- Chart.js: For beautiful, responsive charts
- Font Awesome: For comprehensive icon library
- CSS Grid: For modern, flexible layouts
- LocalStorage: For client-side data persistence
- Animated summary cards showing total income, expenses, and balance
- Monthly bar chart comparing income vs expenses
- Recent transactions list with colorful icons
- Responsive grid layout with hover effects
- Collapsible sidebar with smooth slide animation
- Touch-optimized interface with proper spacing
- Single-column layout for better mobile usability
- Full-screen overlay menu
- Interactive doughnut chart for category breakdown
- Trend line chart showing 30-day financial patterns
- Color-coded data visualization with dark theme
- Responsive chart sizing for all devices
- Clean form design with proper validation
- Dynamic category selection based on transaction type
- Success toast notifications with smooth animations
- Professional styling with neon accent colors
Ready to take control of your finances? Open index.html in your browser and start tracking today! 💰✨