Expense Tracker

A modern client-side Expense Tracker built using HTML, CSS, and vanilla JavaScript. The application helps users record, organize, and analyze expenses efficiently with real-time summaries and visual analytics — all without any backend or frameworks.

---

Overview

This is a single-page frontend application designed to simplify personal expense management. Users can add, edit, and categorize expenses while visually monitoring spending trends through interactive charts.

All data is stored locally in the browser using LocalStorage, making the app fast, lightweight, and easy to use.

---

Features

Expense Management

• Add, edit, and delete expense entries
• Optional expense descriptions
• Assign categories to expenses
• Automatic sorting by most recent entries
• Filter expenses:
  • By category
  • By custom date range

---

Financial Insights

• Automatically calculates:
  • Total expenses
  • Weekly expenses
  • Monthly expenses
• Real-time analytics updates whenever data changes

---

Data Visualization

• Interactive charts powered by Chart.js
• Clear visual representation of spending patterns
• Charts automatically refresh when expenses are updated

---

Persistent Storage

• Uses browser LocalStorage API
• Expenses remain saved after page refresh
• No external database required

---

Responsive Design

• Optimized for desktop, tablet, and mobile devices
• Clean interface for easy expense tracking
• Smooth interactions and layout adaptability

---

Technologies Used

• HTML5
• CSS3 (Responsive Layout + UI Styling)
• JavaScript (ES6+)
• Chart.js
• Web Storage API (LocalStorage)

---

Project Structure

├── index.html    # Application layout and structure
├── style.css     # Styling and responsive design
├── script.js     # Application logic, state handling, analytics

---

Setup & Usage

1. Clone the repository:

   git clone https://github.com/ZamanCodexpress/To-Do-List-Manager.git

   OR download the project as a .zip file and extract it.

2. Open index.html in any modern web browser.

No build tools, dependencies, or server setup required.

---

Implementation Details

• Centralized state stored in JavaScript objects
• Data synchronized with LocalStorage
• UI updates handled through DOM manipulation
• Analytics recalculated after every data change
• Charts destroyed and recreated to ensure accurate updates
• Logic separated into modules:
  • Expense Manager
  • Filters
  • Storage
  • Analytics

---

Limitations

• Data is stored per browser and device only
• Currency is fixed and not configurable
• No backend or cloud synchronization
• No authentication or multi-user support

---

License

This project is open-source and intended for educational and portfolio use.

---

Author

Designed and developed by Zaman Siraj