[React] Investment Calculator

App.jsx

import { useState } from "react";

import Header from "./components/Header";
import UserInput from "./components/UserInput";
import ResultTable from "./components/ResultTable";


const initInput = {
  initialInvestment: 10000,
  annualInvestment: 300,
  expectedReturn: 5,
  duration: 1
}

function App() {
  const [input, setInput] = useState(initInput);

  const handleChange = (evt, type) => {
    setInput((preInput) => {
      return { ...preInput, [type]: +evt.target.value };
    })
  }

  return (
    <>
      <Header />
      <UserInput handleChange={handleChange} input={input} />
      <ResultTable input={input} />
    </>
  )
}

export default App

 

 

Header.jsx

import headerImage from "../assets/investment-calculator-logo.png";

export default function Header() {
    return (
        <>
            <header id="header">
                <img src={headerImage} alt="" />
                <h1>React Investment Calculator</h1>
            </header>
        </>
    )
}

 

 

UserInput.jsx

export default function UserInput({ handleChange, input }) {
    return (
        <section id="user-input">
            <div className="input-group">
                <p>
                    <label htmlFor="initial">INITIAL INVESTMENT</label>
                    <input type="number" id="initial" value={input.initialInvestment} min={1} onChange={(evt) => handleChange(evt, "initialInvestment")} />
                </p>
                <p>
                    <label htmlFor="annual">ANNUAL INVESTMENT</label>
                    <input type="number" id="annual" value={input.annualInvestment} min={1} onChange={(evt) => handleChange(evt, "annualInvestment")} />
                </p>
                <p>
                    <label htmlFor="expected">EXPECTED RETURN</label>
                    <input type="number" id="expected" value={input.expectedReturn} min={1} onChange={(evt) => handleChange(evt, "expectedReturn")} />
                </p>
                <p>
                    <label htmlFor="duration">DURATION</label>
                    <input type="number" id="duration" value={input.duration} min={1} onChange={(evt) => handleChange(evt, "duration")} />
                </p>
            </div>
        </section>
    )
}

 

 

ResultTable.jsx

import { calculateInvestmentResults, formatter } from "../util/investment";

export default function ResultTable({ input }) {
    const results = calculateInvestmentResults(input);

    return (
        <table id="result">
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Investment Value</th>
                    <th>Interest (Year)</th>
                    <th>Total Interest</th>
                    <th>Invested Capital</th>
                </tr>
            </thead>
            <tbody>
                {results.map((element) => {
                    return (
                        <tr>
                            <td>{element.year}</td>
                            <td>{formatter.format(element.valueEndOfYear)}</td>
                            <td>{formatter.format(element.interest)}</td>
                            <td>{formatter.format(element.valueEndOfYear - input.initialInvestment - element.year * element.annualInvestment)}</td>
                            <td>{formatter.format(input.initialInvestment + element.annualInvestment * element.year)}</td>
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )
}