Skip to content

Leslie-23/expense-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Expense Tracker

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.

Features

  • 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.

Usage

  1. Clone the repository.
  2. Navigate to the project directory.
  3. Install dependencies using npm install.
  4. Start the development server using npm start.
  5. Access the Expense Tracker in your browser at http://localhost:3000 (or the specified port).

Dependencies

  • React: ^17.0.2
  • CSS file: ExpenseTracker2.css for styling the component.

How to Use

  1. Select an expense category from the dropdown list.
  2. Enter the amount for the expense.
  3. Click the "Add Expense" button to add the expense to the tracker.
  4. View the cumulative expenses listed below.
  5. Check the total expense displayed at the bottom.

Screenshots

<<<<<<< v-01 [Include screenshots or GIFs of the Expense Tracker component in action if applicable.]

Author

[Leslie-23]

expenseTracker expenseTracker1

Author

Leslie-23

main