The Expense Tracker is a React component that allows users to track their expenses by adding different types of expenses along with their respective amounts.
-
Expense Input:
- Users can select predefined expense categories such as Food, Rent, Transportation, Entertainment, or add a custom category under "Other".
- For the "Other" category, users can specify a custom option.
- Users can input the amount for each expense.
-
Add Expense:
- Users can add the expense to the tracker by clicking the "Add Expense" button.
- The total expense is updated dynamically as new expenses are added.
-
Display:
- Cumulative expenses are displayed in a list format, showing the expense category and amount.
- The total expense is displayed at the bottom, reflecting the sum of all added expenses.
- Clone the repository.
- Navigate to the project directory.
- Install dependencies using
npm install
. - Start the development server using
npm start
. - Access the Expense Tracker in your browser at
http://localhost:3000
(or the specified port).
- React: ^17.0.2
- CSS file:
ExpenseTracker2.css
for styling the component.
- Select an expense category from the dropdown list.
- Enter the amount for the expense.
- Click the "Add Expense" button to add the expense to the tracker.
- View the cumulative expenses listed below.
- Check the total expense displayed at the bottom.
<<<<<<< v-01 [Include screenshots or GIFs of the Expense Tracker component in action if applicable.]
main