https://github.com/manikmaity/expense-tracker-app

💰This repo features an Expense Tracker App with HTML, CSS, and Vanilla JavaScript for efficient finance management. Track expenses, set budgets, and visualize spending patterns seamlessly. Integrated local storage ensures data security. Take control of your finances effortlessly! 📊
https://github.com/manikmaity/expense-tracker-app

chartjs expense-tracker html5 javascript localstorage webapp

Last synced: 6 days ago
JSON representation

💰This repo features an Expense Tracker App with HTML, CSS, and Vanilla JavaScript for efficient finance management. Track expenses, set budgets, and visualize spending patterns seamlessly. Integrated local storage ensures data security. Take control of your finances effortlessly! 📊

• Host: GitHub
• URL: https://github.com/manikmaity/expense-tracker-app
• Owner: ManikMaity
• Created: 2024-05-10T14:10:23.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-10T15:33:14.000Z (9 months ago)
• Last Synced: 2024-11-19T21:45:08.702Z (2 months ago)
• Topics: chartjs, expense-tracker, html5, javascript, localstorage, webapp
• Language: JavaScript
• Homepage: https://expense-tracker-manik.netlify.app/
• Size: 442 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Expense Tracker App 📊💰

📝 Manage your finances efficiently with this Expense Tracker App! Track your expenses, set budgets, and visualize your spending habits to stay on top of your financial goals. Built with HTML, CSS, JavaScript, and integrated with local storage for seamless user experience.

## Table of Contents

- [Preview](#preview)

- [Demo](#demo)

- [Features](#features)  

- [Technologies Used](#technologies-used)

- [Usage](#usage)

- [Acknowledgments](#acknowledgments)

- [Contact](#contact)

---

## Preview

### Desktop Preview



### Mobile Preview



---

## Demo

[Link to Live Demo](https://expense-tracker-manik.netlify.app/)

You can see the project in action by visiting the [live demo](https://expense-tracker-manik.netlify.app/).

---

## Features

Here are some key features of this app:

- 💼 Expense addition with customizable exp tags

- 💰 Budget input and budget editing 

- 📊 Local storage integration for budget, expenses, and tags

- 📜 Expense history display

- ✏️ Edit and delete functionalities for expense items

- 🔍 Expense history sorting options

- 📈 Budget left calculation and visualization via pie chart

- ❌ error handling

- 🖥️ Responsive design for seamless user experience

---

## Technologies Used

- HTML

- CSS

- JavaScript

- ChartJs

---

## Usage

### Installation

1. Clone the repository to your local machine using `git clone`.

2. Navigate to the project directory.

### Running the App

1. Go to `Expense-Tracker-App` folder by typing `cd Expense-Tracker-App` in terminal and type `live-server` in terminal to open Expense Tracker App in browser.

### Adding budget

- **Desktop:** Go to the "Change Budget" section and input your preferred budget amount in the designated field. Click on the "Add" button.

- **Mobile:** Tap on the plus (+) icon and input your budget amount in the provided field. Tap "Add".

### Adding Expenses

- To add expenses, go to the "Add Expense".

- Input the expense amount and select a expense tag. You can also create a custom tag by clicking on "Add tag" button.

- Clear all input fields by clicking on the "Clear" button.

### Viewing Expense History

- Go to `History` Scroll down to view your expense history.

- Sort the expense history by clicking on the dropdown to arrange transactions from high to low or low to high.

### Editing and Deleting Expenses

- In the expense history, each transaction is accompanied by edit and delete icons.

- Click on the edit icon to modify transaction details. A popup will appear where you can edit the amount, tag, or both. Click "Edit Expense" to save changes.

- To delete a transaction, click on the trash icon associated with the transaction and confirm.

### Mobile Screen

- The web app is designed to be responsive and mobile-friendly.

- You can toggle the "Add Expense" and "Change Budget" modal by tapping on the plus icon.

---

## Acknowledgments

This project wouldn't be possible without the following:

[Chart Js](https://www.chartjs.org/)

---

## Contact

- Manik Maity -[[email protected]]

- [My LinkedIn](https://www.linkedin.com/in/manikmaity/)