Skip to content

Latest commit

 

History

History
95 lines (64 loc) · 3.12 KB

README.md

File metadata and controls

95 lines (64 loc) · 3.12 KB

-expense-track

# Expense Tracker

A simple and intuitive web application to track expenses and manage a budget. Built with Tailwind CSS, JavaScript, and Chart.js for visualization.

## Features

- **Add, Edit, and Delete Expense Entries**
  - Add Expense: Input new expenses with details such as amount, date, category, and description.
  - Edit Expense: Modify existing expense entries to correct mistakes or update information.
  - Delete Expense: Remove expenses that are no longer relevant to maintain accurate records.
  
- **Categorize Expenses**
  - Expense Categories: Organize expenses into categories like food, travel, entertainment, etc.
  - Custom Categories: Create custom categories tailored to specific needs for accurate tracking.
  
- **Display a Summary of Total Expenses and Remaining Budget**
  - Total Expenses: View the total amount spent over a selected period.
  - Remaining Budget: Monitor the remaining budget based on the initial budget and total expenses.
  - Expense Breakdown: Get a detailed breakdown of expenses by category.
  
- **Visualize Expenses Using Charts**
  - Pie Chart: Visualize the distribution of expenses across different categories.
  - Bar Chart: Display spending trends over time.
  - Line Chart: Track changes in expenses over an extended period.
  - Customization: Customize the date range and categories displayed in the charts.
  
- **Data Storage**
  - Local Storage: Store data in the user’s browser for offline access and quick retrieval.

## Tech Stack

- **Frontend:** HTML, Tailwind CSS
- **Scripting:** JavaScript
- **Visualization:** Chart.js
- **Storage:** Local Storage (browser)

## Getting Started

### Prerequisites

- A modern web browser

### Installation

1. Clone the repository:
   ```sh
   git clone https://github.com/your-username/expense-tracker.git
  1. Navigate to the project directory: 
    cd expense-tracker

Usage

  1. Open index.html in your browser:

    open index.html

  2. Use the form to add new expenses. The expenses will be displayed in the expense list, and the summary and chart will update accordingly.

Code Structure

  • index.html: Main HTML file containing the structure of the app.
  • style.css: Custom styles for the application (if any).
  • script.js: JavaScript file containing all the logic for adding, editing, deleting expenses, and updating the UI.

Customization

  • You can change the initial budget by modifying the initialBudget variable in script.js.
  • Customize the categories in the form by editing the options in the select element in index.html.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Project Link: https://1saptarshi.github.io/expense-track/