The Expense Tracker is a web application designed to help users manage their expenses efficiently. It allows users to add, view, and delete expenses while also visualizing them through a categorical breakdown chart.
- User Authentication: Secure login to access the expense management.
- Add Expenses: Input for adding expenses with details like name, amount, and category.
- Expense List: Displays all added expenses with options to delete them.
- Expense Visualization: A bar chart displaying expenses categorized by their types for better visual understanding.
- Responsive Design: Adapts smoothly to different screen sizes.
- HTML: Structure of the web pages.
- CSS: Styling of the web components.
- JavaScript: Functionality for handling user interactions and local data management.
- Chart.js: Used for rendering the categorical expense charts.
To run this project:
- Clone the repository
- Open the
index.htmlfile in your browser.
- Login: Enter the default username (
admin) and password (password) to access the main expense tracker interface. - Adding an Expense: Fill in the expense details in the form and submit to see the new expense added to the list and the chart updated accordingly.
- Deleting an Expense: Click the 'Delete' button next to an expense to remove it from the list.
- Viewing Expenses: All added expenses can be viewed under the expense list section and their summarized totals and categories in the chart.
La Alsulaim Zeana El-Hajomar Tassneem Khattab Tian Xie