gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-14 09:46:11 -07: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

28
src/components/LoanCalculator.js
View file

@ -25,22 +25,22 @@ const LoanCalculator = () => {
}, [monthlyPayment]); }, [monthlyPayment]);
return ( return (
<> <div className="widget">
<h4 className="mb-5">Loan Calculator</h4> <h4 className="mb-5">Loan Calculator</h4>
<form onSubmit={(event) => event.preventDefault()}> <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="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="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)}/> <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"> <h4 className="alert alert-info fw-bold">
Monthly Payment: ${parseFloat(monthlyPayment.toFixed(2))} Monthly Payment: ${parseFloat(monthlyPayment.toFixed(2))}
<h5 className="mt-4">Principal Paid: ${loanAmount}</h5> <h5 className="mt-4">Principal Paid: ${loanAmount}</h5>
<h5>Interest Paid: ${parseFloat(interestPaid.toFixed(2))}</h5> <h5>Interest Paid: ${parseFloat(interestPaid.toFixed(2))}</h5>
</h4> </h4>
<button type="submit" className="btn btn-primary btn-lg w-100 mt-3 center" onClick={calculateMonthlyPayment}>Calculate</button> <button type="submit" className="btn btn-primary btn-lg w-100 mt-3 center" onClick={calculateMonthlyPayment}>Calculate</button>
</form> </form>
</> </div>
) )
}; };

7
src/pages/Dashboard.jsx
View file

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