💰 Expense Tracker – Modern JS Project

A clean, responsive, and interactive Expense Tracker Web App built using HTML, CSS, and JavaScript.
This application helps users track income, expenses, categories, and spending patterns with a beautiful UI and a dynamic chart visualization.

---

🚀 Features

🌟 Core Features

• ➕ Add Income & Expense transactions
• 🏷️ Categorize each transaction (Food, Travel, Shopping, Rent, etc.)
• 📌 Filter by type and category
• 🔢 Auto-calculated Balance, Total Income, and Total Expense
• ❌ Delete individual transactions
• 🔄 Reset All Data button with a custom modal confirmation
• 💾 All data saved automatically using localStorage
• 🎨 Clean, modern, fully responsive UI

---

📊 Visualization

• Beautiful Doughnut Chart created using Chart.js
• Live update of category-wise spending

---

📱 Responsive UI

• Fully responsive design for:
  • Mobile
  • Tablet
  • Desktop
• Professionally styled cards & animations
• Custom alert modal + toast notifications

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Structure
CSS3	Styling & Responsive UI
JavaScript (ES6)	Logic & Interactivity
Chart.js	Spending analytics chart
localStorage API	Auto-save user data

---

📸 Screenshots

🏠 Dashboard – Summary Cards & Add Transaction

A clean overview showing your balance, total income, total expenses, and the transaction input form.

---

📋 Transactions – List of All Entries

Displays all income and expense entries with category, date, amount, and delete option.

---

📊 Spending Overview – Category-wise Analytics

A dynamic Chart.js doughnut chart that visualizes expenses across categories.

---

🧠 How It Works

1️⃣ Add a Transaction

• Enter a title, amount, type (Income/Expense), category, and date.
• Click Add.
• The transaction instantly appears in the list.

2️⃣ Automatic Calculations

• The app updates:
  • 💰 Balance
  • 📈 Total Income
  • 📉 Total Expense
• Values change live with every transaction you add or delete.

3️⃣ Smart Data Storage

• All transactions are saved using localStorage.
• 🔄 Data stays safe even after a page refresh.
• No backend required.

4️⃣ Filtering System

• Filter by:
  • Income
  • Expense
  • Category
• The list updates instantly based on your selection.

5️⃣ Spending Analytics Chart

• A Chart.js doughnut chart visualizes:
  • Food
  • Travel
  • Rent
  • Shopping
  • General
  • Others
• Chart updates automatically whenever you add or delete transactions.

6️⃣ Delete a Transaction

• Click ❌ on any entry.
• Summary cards and chart update immediately.

7️⃣ Reset All Data

• Click Reset All Data → A custom confirmation modal appears.
• On Yes, everything is cleared:
  • Transactions
  • Summary
  • Chart
  • localStorage
• A toast message shows “Data reset successfully”.