💰 Smart Daily Expenses Tracker

A modern and interactive expense tracking application built using HTML5, CSS3, and JavaScript. The application allows users to manage daily expenses, filter transactions by category, track spending statistics, and persist data using Local Storage.

---

📌 Project Overview

Smart Daily Expenses Tracker helps users monitor and organize their daily expenses efficiently. Users can add new expenses, delete transactions, filter expenses by category, and view spending insights such as total expenses and highest expenses.

The application also fetches default expense data from a JSON file and stores user data locally, ensuring that expenses remain available even after refreshing the browser.

---

✨ Features

• ➕ Add new expenses
• 🗑️ Delete existing expenses
• 📊 Display total expenses
• 🔢 Show total number of transactions
• 💸 Highlight highest expense amount
• 🔍 Filter expenses by category
• 💾 Store data using Local Storage
• 📥 Load initial expense data from a JSON file
• 📋 Dynamic expense table generation
• 🎨 Modern dashboard design with summary cards

---

🛠️ Technologies Used

Frontend

• HTML5
• CSS3
• JavaScript (ES6)

JavaScript Concepts Applied

• Arrays and Objects

• DOM Manipulation

• Event Handling

• Functions

• Array Methods

  • forEach()
  • filter()
  • reduce()

• Fetch API

• Local Storage

• JSON Parsing

• Template Literals

---

📂 Project Structure

Daily-Expense-Tracker/
├── DailyExpenseTracker.html
├── DailyExpenseTracker.css
├── expenses.json
└── README.md

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/21A35A0503/Daily-Expense-Tracker.git

2. Navigate to the Project Folder

cd Daily-Expense-Tracker

3. Run the Project

Since the application uses the Fetch API to load expenses.json, run it using a local server.

Using VS Code Live Server

• Install the Live Server extension.
• Right-click on index.html.
• Select Open with Live Server.

The application will open in your browser automatically.

---

📸 Application Modules

Dashboard Summary Cards

• Total Expenses
• Total Transactions
• Highest Expense

Expense Management

• Add Expense Form
• Expense Table
• Delete Transactions

Filtering

• Filter expenses by category:

  • Food
  • Travel
  • Utilities
  • Entertainment
  • Health
  • House Allowance

---

🎯 Learning Outcomes

Through this project, I gained practical experience in:

• Building CRUD operations using JavaScript.
• Fetching and processing JSON data.
• Persisting application state using Local Storage.
• Using array methods for data analysis.
• Dynamically updating the DOM.
• Designing dashboard-style user interfaces.

---

🔮 Future Enhancements

• Edit existing expenses.
• Add expense date and time.
• Monthly expense reports.
• Expense charts and visualizations.
• Export reports as CSV or PDF.
• Search functionality.
• Dark mode support.

---

👩‍💻 Author

Harika Neela

GitHub: https://github.com/21A35A0503

---

⭐ Support

If you found this project useful, please consider giving it a Star ⭐ on GitHub.

---

📄 License

This project is created for educational and learning purposes.