Project Description

This Expense Tracking Web Application or Expense Tracker is a web application designed for shoppers to track the items they buy and their respective prices.

Anyone with a phone or PC and a working internet connection can use the app. However, the app was designed for those without a stable internet connection in mind as well. Loss of network connection doesn't equate to data loss, which means that the app collects the user input stores it in their local storage and deletes it only when the user clears their history.

The expense tracker is applicable in all kinds of shopping endeavours. But it is recommended for small individual/personal expense tracking during grocery shopping, clothes shopping, house items shopping, etc.

Key Features

• Main Page
  • Price Input Field: The user inputs the price of the item they want to track.
  • Number Buttons: The user uses the number buttons to key in values. They range from 0 to 9.
  • Backspace Button: This helps the user clear the last keyed-in number in case of an incorrectly entered value.
  • Save Price Button: This brings up a modal overlay prompting the user to enter the item name they want to keep track of.
  • Total Value: This displays the sum of all the user has spent.
  • Save Item Button: This appears within the modal overlay, saving an item and its prices in the local storage.
• History Page
  • Table of Items and Prices: This contains a list of all the items the user has bought and their respective prices.
  • Clear History Button: This deletes all the user's entries from the "Table of Items and Prices".
  • Total Value: This displays the sum of all the user has spent.

Design and Prototype

Expense-Tracker-video.mp4

How to Use

Let's say a user named Amara wants to use this app.

• Firstly, she needs to key in the price of the first item she wants.
• If she keys in an incorrect price, she can quickly correct it using the red backspace button.
• Once she keys in the item's value (price), she presses the green tick button to signal that to the app.
• A box(modal) will ask her what item she bought.
• Once she types in the item she bought, she presses the "Save Item Button" and the app saves her item and price.
• She can now view the item on the History page.
• She can do the same for every item she buys, and just like that, we have helped Amara track her spending.

Link to Use the Expense Tracker

https://amarafinbarrs.github.io/expense-tracker-v1/