Skip to content

ayush8303/Budget-Tracker-Javascript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ’° Budget Tracker Site

This website is a budget tracker that allows users to add and track their income and expenses. It is built using HTML, CSS, and JavaScript, and it uses local storage to store the data.

πŸš€ Features

The budget tracker site has the following features:

  • πŸ’Έ Add Transaction: Users can add a transaction by entering a description and the amount. If the amount is negative, it is considered as an expense, otherwise, it is considered as income. The transaction is added to the history and the balance is updated accordingly.

  • πŸ“œ Transaction History: The site displays a history of every transaction, separated into income and expense columns. Users can also delete any transaction by clicking the delete button.

  • πŸ“Š Statistics: The site displays the current balance, total income, and total expenses in a statistics section.

πŸ“– How to Use

To use the budget tracker site, follow these steps:

  1. Clone the repository to your local machine or download the ZIP file.

  2. Open the index.html file in your browser.

  3. Enter your transaction details in the form fields and click the "Add" button.

  4. Your transaction will be displayed in the history with the total income, total expenses, and balance updated accordingly.

  5. To delete a transaction, click the delete icon next to the transaction in the history section.

πŸ”§ Technologies Used

  • HTML
  • CSS
  • JavaScript

πŸ’Ύ Local Storage

The budget tracker site uses local storage to store the data. This means that the data will be saved on the user's computer even if they close the browser or navigate away from the site. The data is stored as a JSON string in local storage, and it is parsed and displayed on the screen when the user returns to the site.

πŸ™ Credits

This site was created by Ayush Anand Tripathi

πŸ”— Link to Site

You can access the budget tracker site by clicking on the following link: https://budget-tracker-javascript.netlify.app/


Made with ❀️ using HTML, CSS, and JavaScript.