build me a website of expense tracker

Problem Statement: - Expense Tracker

HTML, CSS and JavaScript

Requirements:

· A form for adding expenses.

o Form inputs: Title, description, amount, category

· A form for adding categories

o Form inputs: Name, category expense limit

· A form for adding total expense limit

· A list of expenses on dashboard

· A list of categories on dashboard

· When the user clicks on a specific category, the expense list should be filtered based on that category. At the same time, instead of total limit, category limit should be shown.

· A form to edit category limit and name

· A form to edit expense

· Feature for deleting category/expense

· A dialog/alert while deleting a category/expense

· Validations of incorrect input

· The expense list item should show the title, description, date/time added, category, amount, edit/delete buttons

Flow:

· On the dashboard, the list of categories should be visible along with the list of expenses.

· When the user clicks on any specific category, it should be highlighted and the expense list should be filtered.

· On the dashboard itself, total expense and total expense limit should be visible.

· When any category is selected, category expense and category limit should be shown.

· When user adds and expense, if the category is selected then the expense should be added in that category only. If the category is not selected, then the user should be given a dropdown for selecting the category.

· The user should be able to add/edit/delete a category or or an expense.

· When total expense is greater than the total limit, an alert icon should be visible.

· Similarly, when category expense is greater that category limit, the alert icon should be visible.

Dashboard:

· On the dashboard, the expense list, category list, total expense and total limit should be visible.