Expense Tracker

A modern, minimalistic Expense Tracker app with beautiful analytic dashboard utilizing localstorage of your browser. This application helps you manage your daily expenses, visualize spending patterns through interactive charts, and keep a clear history of your transactions.

✨ Features

• Interactive Analytics Dashboard:
  • Category Breakdown: Visualize your spending distribution across different categories with a dynamic doughnut chart.
  • Spending Trends: Track your expenses over the last 7 days with a clear line chart.
  • Real-time Statistics: Instantly view total expenses, transaction count, and average expense with animated updates.
• Seamless Expense Management:
  • Quickly add new expenses with description, amount, and category.
  • View a chronological list of your recent transactions.
  • Effortlessly delete individual expenses.
  • Option to clear all recorded expenses.
• Micro-animations & Smooth Interactions:
  • Subtle slide-in animations for new expense entries.
  • Smooth transitions for stat card updates and button interactions.
  • Custom scrollbars for a refined look and feel.
  • Smooth scrolling for navigation within the app.
• Persistent Data: All your expense data is saved locally in your browser's storage, so it persists even after closing the tab.
• Responsive Design: Optimized for seamless use across various devices, from desktops to mobile phones.
• Keyboard Shortcuts:
  • Ctrl + Enter (or Cmd + Enter on Mac) to quickly add an expense.
  • Escape to clear the expense form.

🚀 Technologies Used

• HTML5: For structuring the web content.
• Tailwind CSS v4: For rapid and utility-first styling, enabling the dark Swiss aesthetic.
• JavaScript (Vanilla): For all application logic, data management, and DOM manipulation.
• Chart.js: A powerful open-source JavaScript charting library for data visualization.
• Google Fonts:
  • Inter: A clean and modern sans-serif typeface for general text.
  • JetBrains Mono: A monospaced font used for numerical displays, enhancing the precise Swiss feel.

💡 Usage

1. Add an Expense:
   • Enter a Description (e.g., "Coffee", "Bus Fare").
   • Enter the Amount (e.g., "4.50", "2.75").
   • Select a Category from the dropdown.
   • Click "Add Transaction" or press Ctrl + Enter (or Cmd + Enter).
2. View Analytics: The charts will automatically update to reflect your spending patterns by category and over time.
3. Manage Transactions: Your recent transactions are listed below the charts. Click the trash icon next to an item to delete it.
4. Clear All: Use the "Clear All" button to remove all recorded expenses (a confirmation prompt will appear).