Ben Foster | React Developer & AI Builder

Expense Tracker File

'use client';

import { useState, type FormEvent } from 'react';
import { motion, AnimatePresence } from "framer-motion"
import { Input } from './tracker-logic';

type Expense = {
  id: string
  name: string
  price: number
}

export function ExpenseTracker() {
    
    const budget = 500
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [price,setPrice] = useState("0")
    const [name,setName] = useState("")
    const [expenses, setExpenses] = useState<Expense[]>([])
    const totalSpent = expenses.reduce((sum, expense) => sum + expense.price, 0)
    const remaining = (budget - totalSpent)
    
    function handleSubmit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault()
        if (!name.trim() || isNaN(Number(price))) {
            return
            }
        const newExpense = { 
            id: crypto.randomUUID(),
            name:name.trim(),
            price: Number(price)
        }
        setExpenses([...expenses, newExpense])
        setName("")
        setPrice("")
        setIsMenuOpen(false)
        }
        
    return (
        <div className="relative ">
            <AnimatePresence>
                {isMenuOpen && (
                    <motion.div 
                        initial={{ x: 100, opacity: 0 }}
                        animate={{ x: 0, opacity: 1 }}
                        exit={{ x: 100, opacity: 0 }}
                        transition={{ type: "tween", duration: 0.2 }}className=" absolute right-4 gap-2 flex 
                        flex-col items-center justify-center w-1/3 lg:w-1/2 top-12 right-8">
                            <Input price={price} setPrice={setPrice} name={name} setName={setName} 
                            handleSubmit={handleSubmit} expenses={expenses} />
                        <motion.button 
                        initial={{ x: 100, opacity: 0 }}
                        animate={{ x: 0, opacity: 1 }}
                        exit={{ x: 100, opacity: 0 }}
                        type="submit"
                        form="expense-form"
                        className=" rounded-md w-1/2 font-inter text-orange-600 bg-white shadow-lg 
                        cursor-pointer ">
                            Submit
                        </motion.button>
                    </motion.div>
                )}
                       
            
            </AnimatePresence>
            <div className="w-full h-full p-1 lg:p-2 bg-white rounded-md">
                <div className="p-1 lg:p-2 space-y-2 lg:space-y-4">
                <div className="p-1 lg:p-2 mx-auto w-fit space-y-2 lg:space-y-4 text-center">
                    <h1 className="p-2 lg:p-4 font-sora text-2xl text-orange-600">Expense Tracker</h1>
                    <motion.button
                        
                        className="p-2 lg:p-4 rounded-lg text-orange-600 hover:scale-110 cursor-pointer 
                        transition shadow-lg bg-orange-100 font-bold"
                        onClick={() => setIsMenuOpen(!isMenuOpen)}
                        animate={{
                            x: isMenuOpen ? -100 : 0
                        }}
                        transition={{ duration: 0.2}}>
                        <p className="font-inter font-bold">Add an item</p>
                       
                        
                    
                    </motion.button>
                </div>
                <div className="flex p-1 lg:p-2 gap-2 lg:gap-2">
                    <div className="p-1 lg:p-2 space-y-2 lg:space-y-4 w-1/2">
                        <div className="p-2 lg:p-4 font-inter font-bold text-lg lg:text-xl text-orange-600
                         rounded-lg shadow-lg bg-orange-100">Left to spend: {remaining} </div>
                        <div className="p-2 lg:p-4 font-inter font-bold text-lg lg:text-xl text-orange-600
                         rounded-md shadow-lg bg-orange-100">Total Expenses: {totalSpent} </div>
                        <div className="p-2 lg:p-4 font-inter font-bold text-lg lg:text-xl text-orange-600
                         rounded-md shadow-lg bg-orange-100">Budget: {budget} </div>
                    </div>
                    <div className="p-2 lg:p-2 grid  w-1/2 font-inter text-orange-600 flex flex-col">
                        <AnimatePresence>
                            {expenses.map((entry) => (
                            <motion.div
                                initial={{ x: 100, opacity: 0 }}
                                animate={{ x: 0, opacity: 1 }}
                                exit={{ x: 100, opacity: 0 }}
                                key={entry.id}
                                className="w-full rounded-md p-2 font-inter font-bold text-orange-600 shadow-lg
                                 bg-orange-100 w-fit h-fit">
                            <div>Purchase: {entry.name}</div>
                            <div>Cost: {entry.price}</div>
                            </motion.div>
                         ))}
                        </AnimatePresence>
                    </div>
               
                </div>
                </div>
            
        </div>
        </div>
    
    )
}

Notes

// 'use client' tells Next.js to use client-side rendering, which is necessary for files using state. // Inputs: // - useState must be imported, as this file uses state. // - FormEvent must be imported for use in the event handler, since this is a TypeScript file. // - motion and AnimatePresence are necessary for the animations used. // The type Expense block defines a TypeScript type for one expense object. Each expense must have an id (string), and other properties as defined in the code. // Next are the constants: // - The first is a hardcoded budget, used for calculations. // - The next establishes the state for whether the input form is open or not. This should be called isFormOpen, not isMenuOpen (it's named this way because it was copy-pasted from a similar component). // - The price and name state lines establish the state for tracking user input into the form, and give them default values. // - The expenses line is the state that will store the inputted items, to be mapped onto the screen. // - totalSpent calculates the total from the expenses array using the reduce function, and the next line uses this to calculate the remaining budget. // Function handler: // The function handler deals with the input from the form submission later in the code. // The first two parts deal with validation: // event.preventDefault() stops the form’s normal submit behavior (page refresh), so your React handler can control the process. // if (!name.trim() || isNaN(Number(price))) { return } is the gatekeeper check: // - !name.trim() means the name is empty or only spaces // - isNaN(Number(price)) means price is not a valid number // - If either is true, return exits early, so no bad expense gets created. // If validation passes, const newExpense runs; each item gets a new value, text is trimmed from empty spaces at either end, and price is stored as a number ready to be used in calculations. // The next part adds the newExpense to the expenses array, then resets name and price to empty strings for the next submission. isMenuOpen is also set to false, triggering the input form to close. // Main return function of the expense tracker: // Here, the Input component from the next file is rendered, ready to accept the variables and functions as props. // It accepts price, setPrice, name, setName, handleSubmit, and expenses because those are defined as its props when it was made. // This means the structure in its origin file is filled out with the values and functions from this file when it is rendered. // The reason it was done like this was because it seemed tidier to store the input form separately. // {isMenuOpen && ...} assesses the isMenuOpen constant, and if it's true, it renders the input form. Animation props control its movement on and off screen. // Because there is a handleSubmit prop accepted, the Input component uses the earlier-made function handler. // The next part is the interactive section native to the expense tracker (as opposed to the interactive part rendered above, which is the form, created elsewhere and imported). // Here is the button to bring up the form, which uses onClick to toggle menu state on and off, thereby rendering the form as seen above. // This part does two things: calculates totals using the constants declared earlier, and maps the expenses array onto the component. // This was my first experience with mapping from arrays, and it's helped me to think in a data-first way. // In expenses.map, entry.name and entry.price are used to access the price and name properties of the expenses array, which are determined in previous code.

Tracker Logic File

'use client';

import { type FormEvent } from 'react';

type Expense = {
  id: string
  name: string
  price: number
}

type InputProps = {
  price: string
  setPrice: (value: string) => void
  name: string
  setName: (value: string) => void
  handleSubmit: (event: FormEvent<HTMLFormElement>) => void
  expenses: Expense[]
}



export function Input( { price ,setPrice,name,setName,handleSubmit,expenses }: InputProps) {
    return (
        <div id="tracker-logic">
            <form id="expense-form" onSubmit={handleSubmit} className="flex flex-col items-center justify-center p-4 space-y-4 min-w-[200px]">
            <input 
                className="bg-white p-1 lg:p-2 rounded-md font-inter text-orange-600 shadow-lg w-1/2"
                type="number"
                value={price}
                onChange={(event) => setPrice(event.target.value)}
            />
             <input
                className="bg-white p-1 lg:p-2 rounded-md font-inter text-orange-600 shadow-lg w-1/2"
                type="text"
                value={name}
                onChange={(event) => setName(event.target.value)}
            />
           
                      
                
            </form>
        </div>
    )
};