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>
)
}
'웹 프로그래밍' 카테고리의 다른 글
[Spring Boot] API 생성 (0) | 2024.07.08 |
---|---|
[React] 프로젝트 관리 앱 (1) | 2024.01.26 |
[YelpCamp 프로젝트] 보안 (0) | 2023.12.11 |
[Yelpcamp 프로젝트] 디자인 수정 (0) | 2023.12.10 |
[Yelpcamp 프로젝트] 클러스터 맵 (0) | 2023.12.09 |