Expense Tracker App

To build a Single Page Application (SPA) for the Expense Tracker App.

?? This Expense Tracker is a simple yet effective web application designed to help users keep track of their daily expenses.

?? Built using React JS Hooks , this tool allows users to add, view, and manage their costs by specifying the expense name, amount, date, and category (Food, Transport, Entertainment, or Utilities).

?? It supports functionalities like adding new expenses, removing individual entries, clearing all costs, and dynamically updating the total expense value. ?? It is an excellent tool for personal finance management, offering a clean and user-friendly interface.

import React, { useState } from 'react';

import './App.css';

const App = () => {

const [expenses, setExpenses] = useState([]);

const [name, setName] = useState('');

const [amount, setAmount] = useState('');

const [date, setDate] = useState('');

const [category, setCategory] = useState('Food');

const addExpense = (e) => {

e.preventDefault();

if (!name || !amount || !date) return;

setExpenses([

...expenses,

{

id: Date.now(),

name,

amount: parseFloat(amount),

date,

category,

},

]);

setName('');

setAmount('');

setDate('');

};

const removeExpense = (id) => {

setExpenses(expenses.filter((expense) => expense.id !== id));

};

const clearExpenses = () => {

setExpenses([]);

};

const totalExpense = expenses.reduce((total, expense) => total + expense.amount, 0);

return (

<div className="app-container">

<h1>Expense Tracker</h1>

<form className="expense-form" onSubmit={addExpense}>

<input

type="text"

placeholder="Expense Name"

value={name}

onChange={(e) => setName(e.target.value)}

/>

<input

type="number"

placeholder="Amount"

value={amount}

onChange={(e) => setAmount(e.target.value)}

/>

<input

type="date"

value={date}

onChange={(e) => setDate(e.target.value)}

/>

<select value={category} onChange={(e) => setCategory(e.target.value)}>

<option value="Food">Food</option>

<option value="Transport">Transport</option>

<option value="Entertainment">Entertainment</option>

<option value="Utilities">Utilities</option>

</select>

<button type="submit">Add Expense</button>

</form>

<div className="expense-list">

{expenses.length === 0 ? (

<p>No expenses added yet.</p>

) : (

expenses.map((expense) => (

<div key={expense.id} className="expense-item">

<div>

<h4>{expense.name}</h4>

<p>

{expense.category} | {expense.date}

</p>

</div>

<div>

<p>RS - {expense.amount.toFixed(2)}</p>

<button onClick={() => removeExpense(expense.id)}>Remove</button>

</div>

</div>

))

)}

</div>

<div className="summary">

<h3>Total Expense: RS - {totalExpense.toFixed(2)}</h3>

<button className="clear-button" onClick={clearExpenses}>

Clear All

</button>

</div>

</div>

);

};

export default App;

App.css

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;

}

.app-container {

text-align: center;

padding: 20px;

max-width: 600px;

margin: auto;

}

h1 {

color: #333;

}

/* Expense Form */

.expense-form {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 20px;

}

.expense-form input,

.expense-form select,

.expense-form button {

padding: 10px;

border: 1px solid #ccc;

border-radius: 4px;

flex: 1 1 calc(33.33% - 20px);

}

.expense-form button {

flex: 1 1 100%;

background-color: #007bff;

color: white;

cursor: pointer;

}

.expense-form button:hover {

background-color: #0056b3;

}

/* Expense List */

.expense-list {

text-align: left;

margin-bottom: 20px;

}

.expense-item {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 10px;

padding: 10px;

border: 1px solid #ddd;

border-radius: 4px;

background-color: #f9f9f9;

}

.expense-item button {

background-color: #dc3545;

color: white;

border: none;

padding: 5px 10px;

cursor: pointer;

}

.expense-item button:hover {

background-color: #b02a37;

}

/* Summary Section */

.summary {

margin-top: 20px;

}

.clear-button {

background-color: red;

color: white;

border: none;

padding: 10px 15px;

cursor: pointer;

}

.clear-button:hover {

background-color: darkred;

}