Expense Tracker

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

npx create-react-app expense-tracker
cd expense-tracker

Step 2: Create the Expense Tracker Components

Replace the content of src/App.js with the following code:

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [expenses, setExpenses] = useState([]);
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState('');

  const addExpense = () => {
if (description && amount) {
  setExpenses([...expenses, { description, amount: parseFloat(amount) }]);
  setDescription('');
  setAmount('');
}
  };

  const totalExpenses = expenses.reduce((acc, expense) => acc + expense.amount, 0);

  return (
<div className="App">
  <h1>Expense Tracker</h1>
  <div className="input-container">
    <input
      type="text"
      placeholder="Description"
      value={description}
      onChange={(e) => setDescription(e.target.value)}
    />
    <input
      type="number"
      placeholder="Amount"
      value={amount}
      onChange={(e) => setAmount(e.target.value)}
    />
    <button onClick={addExpense}>Add Expense</button>
  </div>
  
  <h2>Total Expenses: ${totalExpenses.toFixed(2)}</h2>
  <ul>
    {expenses.map((expense, index) => (
      <li key={index}>
        {expense.description}: ${expense.amount.toFixed(2)}
      </li>
    ))}
  </ul>
</div>
  );
};

export default App;

Step 3: Style Your Expense Tracker

Open src/App.css and add the following styles:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.input-container {
  margin-bottom: 20px;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

h2 {
  margin-top: 20px;
}

Step 4: Run Your Application

In the terminal, run:

npm start