gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-07 21:48:14 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Jake's stuff

Browse source
This commit is contained in:
jveebs 2023-04-23 17:39:15 -04:00
parent 8f72d73601
commit ee114ea3aa
2 changed files with 20 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/LoanCalculator.js
View file

@ -25,22 +25,22 @@ const LoanCalculator = () => {
}, [monthlyPayment]);
return (
<>
<h4 className="mb-5">Loan Calculator</h4>
<div className="widget">
<h4 className="mb-5">Loan Calculator</h4>
<form onSubmit={(event) => event.preventDefault()}>
<FormInputGroup text="Loan Amount $" placeholder="Enter the value of the loan" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
<FormInputGroup text="Interest Rate %" placeholder="Enter interest rate of the loan" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
<FormInputGroup text="Loan Duration in Years" placeholder="Enter the duration of the loan in years" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
<h4 className="alert alert-info fw-bold">
Monthly Payment: ${parseFloat(monthlyPayment.toFixed(2))}
<h5 className="mt-4">Principal Paid: ${loanAmount}</h5>
<h5>Interest Paid: ${parseFloat(interestPaid.toFixed(2))}</h5>
</h4>
<button type="submit" className="btn btn-primary btn-lg w-100 mt-3 center" onClick={calculateMonthlyPayment}>Calculate</button>
</form>
</>
<form onSubmit={(event) => event.preventDefault()}>
<FormInputGroup text="Loan Amount $" placeholder="Enter the value of the loan" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
<FormInputGroup text="Interest Rate %" placeholder="Enter interest rate of the loan" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
<FormInputGroup text="Loan Duration in Years" placeholder="Enter the duration of the loan in years" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
<h4 className="alert alert-info fw-bold">
Monthly Payment: ${parseFloat(monthlyPayment.toFixed(2))}
<h5 className="mt-4">Principal Paid: ${loanAmount}</h5>
<h5>Interest Paid: ${parseFloat(interestPaid.toFixed(2))}</h5>
</h4>
<button type="submit" className="btn btn-primary btn-lg w-100 mt-3 center" onClick={calculateMonthlyPayment}>Calculate</button>
</form>
</div>
)
};

7
src/pages/Dashboard.jsx
View file

@ -42,10 +42,13 @@ export default function Dashboard() {
</div>
<div className='row mt-3'>
<div className='col-12 col-lg-6'>
<div className='col-12 col-md-12 col-lg-4'>
<LoanCalculator/>
</div>
<div className='col-12 col-lg-4'>
<CategorizedExpenses/>
</div>
<div className='col-12 col-lg-6'>
<div className='col-12 col-lg-4'>
<CategorizedIncome/>
</div>
</div>