🌐
50 React Coding Puzzles
  • 50 React Coding Puzzles
  • Contact
  • Reviews
  • Table of Contents
  • Introduction
  • 1 - Simple Counter App
  • 2 - Dynamic List of Items with Strikethrough
  • 3 - Color Picker with Hex Code Display
  • 4 - Password Strength Checker
  • 5 - Countdown Timer with Audio
  • 6 - Dynamic Movie List with Filtering and Sorting
  • 7 - Text Animation Component (Fade/Scroll)
  • 8 - Dynamically Generated Text Art
  • 9 - Meme Generator with Custom Text
  • 10 - "What Should I Eat?" Random Recipe Generator
  • 11 - Simple Quiz App with Multiple Choice
  • 12 - Unit Converter
  • 13 - Dynamic Image Gallery with Lightbox
  • 14 - Weather Widget with Temperature and Description
  • 15 - Contact Form with Email and Message Validation
  • 16 - Color Palette Generator
  • 17 - Drag-and-Drop Feature for Rearranging Items
  • 18 - Interactive Quiz with Dynamic Results and Feedback
  • 19 - To-Do List with Task Categorization
  • 20 - Note-Taking App with Markdown Support
  • 21 - Simple Calculator with Basic Operations
  • 22 - Word Scramble Game with Timer and Score
  • 23 - Number Guessing Game
  • 24 - Digital Clock with Time Zone Support
  • 25 - Interactive Time Zone Converter
  • 26 - Weather Forecast App with Location Detection
  • 27 - Real-Time Stock Ticker with Updates
  • 28 - Virtual Dice Roller with Multiple Dice
  • 29 - Responsive Navigation Menu with Dropdowns
  • 30 - Progress Bar for Loading or Task Completion
  • 31 - Modal Window for Alerts and Confirmations
  • 32 - Infinite Scroll for Loading More Content
  • 33 - Form Validation with Error Messages
  • 34 - Search Bar with Filtering and Suggestions
  • 35 - Drag-and-Drop File Upload
  • 36 - Interactive Color Picker with Sliders
  • 37 - Image Carousel with Autoplay
  • 38 - Rating System with Stars or Thumbs Up/Down
  • 39 - Comment Section with Nested Replies
  • 40 - Pagination for Long Lists of Data
  • 41 - Stopwatch app that tracks elapsed time
  • 42 - Responsive E-commerce Product Grid
  • 43 - Random Movie/Book Recommender
  • 44 - Kanban board for managing tasks with drag-and-drop
  • 45 - Chat application with real-time messaging using WebSockets
  • 46 - Calendar that displays events and allows scheduling
  • 47 - Tic-Tac-Toe Game
  • 48 - Hangman Game
  • 49 - Notes App
  • 50 - Expense Tracker
  • Afterword
  • Appendix
Powered by GitBook
On this page
  • Description
  • Algorithm
  • Classes
  • Code
  • Possible Future Enhancements:

50 - Expense Tracker

Description

Build an Expense Tracker web application using React to help users keep track of their expenses. The main purpose is to assist users in keeping track of their expenses. With this app, users can easily add, and delete expenses to view a summary of their spending habits as well, and it will show the available balance the user has left.

Algorithm

  • Design the UI components:

    • Header: Display the app title and balance

    • ExpenseList: Display a list of expenses

    • ExpenseForm: Allow users to add new expenses

    • Balance: Display the available balance

  • Create the logic for adding and deleting expenses:

    • Use a state array to store expenses

    • Use a function to add new expenses to the state array

    • Use a function to delete expenses from the state array

  • Calculate the available balance:

    • Use a function to sum up the expenses and subtract from the initial balance

  • Render the UI components and logic:

    • Use React hooks to manage state and side effects

    • Use JSX to render the UI components

Classes

  • App: The main app component

  • Header: The header section component

  • ExpenseList: The expense list component

  • ExpenseForm: The expense form component

  • Balance: The balance component

Code

App.js

import React, { useState, useEffect } from 'react';
import Header from './Header';
import ExpenseList from './ExpenseList';
import ExpenseForm from './ExpenseForm';
import Balance from './Balance';

const App = () => {
  const [expenses, setExpenses] = useState([]);
  const [balance, setBalance] = useState(1000); // initial balance

  useEffect(() => {
    const totalExpenses = expenses.reduce((acc, curr) => acc + curr.amount, 0);
    setBalance(balance - totalExpenses);
  }, [expenses]);

  const addExpense = (expense) => {
    setExpenses((prevExpenses) => [...prevExpenses, expense]);
  };

  const deleteExpense = (id) => {
    setExpenses((prevExpenses) => prevExpenses.filter((expense) => (link unavailable) !== id));
  };

  return (
    <div className="app">
      <Header balance={balance} />
      <ExpenseList expenses={expenses} deleteExpense={deleteExpense} />
      <ExpenseForm addExpense={addExpense} />
      <Balance balance={balance} />
    </div>
  );
};

export default App;

Header.js

import React from 'react';

const Header = ({ balance }) => {
  return (
    <div className="header">
      <h1>Expense Tracker</h1>
      <p>Balance: ${balance}</p>
    </div>
  );
};

export default Header;

ExpenseList.js

import React from 'react';

const ExpenseList = ({ expenses, deleteExpense }) => {
  return (
    <div className="expense-list">
      {expenses.map((expense) => (
        <div key={(link unavailable)}>
          <p>{expense.description}</p>
          <p>${expense.amount}</p>
          <button onClick={() => deleteExpense((link unavailable))}>Delete</button>
        </div>
      ))}
    </div>
  );
};

export default ExpenseList;

ExpenseForm.js

import React from 'react';

const ExpenseForm = ({ addExpense }) => {
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState(0);

  const handleSubmit = (event) => {
    event.preventDefault();
    addExpense({ description, amount });
    setDescription('');
    setAmount(0);
  };

  return (
    <div className="expense-form">
      <form onSubmit={handleSubmit}>
        <label>Description:</label>
        <input
          type="text"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
        <label>Amount:</label>
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
        <button type="submit">Add Expense</button>
      </form>
    </div>
  );
};

export default ExpenseForm;

Balance.js

import React from 'react';

const Balance = ({ balance }) => {
  return (
    <div className="balance">
      <p>Available Balance: ${balance}</p>
    </div>
  );
};

export default Balance;

This code creates an Expense Tracker web application using React. Users can add and delete expenses, and the app will display a summary of their spending habits and the available balance. The app uses state and effect hooks to manage the expenses and balance.

Possible Future Enhancements:

  • Add authentication and authorization to secure user data

  • Implement data storage using a backend service or local storage

  • Add filtering and sorting capabilities to the expense list

  • Integrate with other financial tools and services

  • Improve user experience with animations and transitions

Previous49 - Notes AppNextAfterword

Last updated 10 months ago