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

Merge branch 'main' of https://github.com/jacobmveber-01839764/BudgetBuddy

Browse source
This commit is contained in:
jveebs 2023-04-23 17:13:14 -04:00
commit 8f72d73601
4 changed files with 100 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/FormInputGroup.js Normal file
View file

@ -0,0 +1,12 @@
import React from "react";
const FormInputGroup = ({text, placeholder, value, onInput}) => {
return (
<div className="input-group mb-4">
<label className="input-group-text">{text}</label>
<input type="number" className="form-control" placeholder={placeholder} value={value} onInput={onInput} />
</div>
)
};
export default FormInputGroup;

47
src/components/LoanCalculator.js Normal file
View file

@ -0,0 +1,47 @@
import React, { useEffect, useState } from "react";
import FormInputGroup from "./FormInputGroup";
const LoanCalculator = () => {
const [loanAmount, setLoanAmount] = useState(0);
const [interestRate, setInterestRate] = useState("");
const [loanDuration, setLoanDuration] = useState("");
const [monthlyPayment, setMonthlyPayment] = useState(0);
const [interestPaid, setInterestPaid] = useState(0);
const calculateMonthlyPayment = () => {
const percentageToDecimal = (percent) => {
return percent / 12 / 100;
}
const yearsToMonths = (years) => {
return years * 12;
}
setMonthlyPayment(percentageToDecimal(interestRate * loanAmount) / (1 - Math.pow(1 + percentageToDecimal(interestRate), -yearsToMonths(loanDuration))));
}
useEffect(() => {
setInterestPaid(monthlyPayment * (loanDuration * 12) - loanAmount);
}, [monthlyPayment]);
return (
<>
<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>
</>
)
};
export default LoanCalculator;

75
src/pages/About-Us.jsx
View file

@ -1,3 +1,4 @@
import React from 'react';
import umass_lowell from './images/umass_lowell.jpeg'
import river_hawk from './images/river_hawk.png'
import budget_hero from './images/budgethero1.png'
@ -6,48 +7,48 @@ export default function AboutUs() {
return (
<>
<div className="container overflow-auto">
<header>
<header>
<div className="container h-100">
<div className="row h-100 align-items-center">
<div className="mt-4 col-12 text-center">
<h1 className="fw-light">About Us</h1>
<p className="lead">Budget Buddy</p>
</div>
</div>
</div>
</header>
<div className="container h-100">
<div className="row h-100 align-items-center">
<div className="row h-100 align-items-center">
<div className="mt-4 col-12 text-center">
<h1 className="fw-light">About Us</h1>
<p className="lead">Budget Buddy</p>
<img className="img-fluid col-8" src={umass_lowell} alt="uml campus" />
</div>
</div>
</div>
<p className="mt-5">We're four computer science students from UMass Lowell. Our names are Daniel Quinonez, Jacob Veber, Gabe Herrera, and Chris Olaf.</p>
<p className="mt-4">
Using Budget Buddy, we are hoping to help young people learn how to better take control of their finances. We know that it can be extremely
difficult to balance bills and other expenses at the same time as being a full-time student, so we want to make it as
easy as possible for students to quickly understand what their budget looks like. In addition, we want to help young people
make plans to pay off any loans they have needed to take out if, for example, they are a college student. This way, we hope that the
daunting task of managing debt while being a young adult with little or unstable income can be made easier.
</p>
<p className="mt-4 mb-5">
By helping the young demographic manage their way through debt, we are aiming to help them gain financial independence as soon as
possible, so that they can live their lives post-graduation with the most opportunities. Also, and possibly most
importantly, we hope that by using Budget Buddy, people gain an idea of how to effectively balance their budget.
This way, they will be able to manage their money in a more effective way after they graduate and move into the professional
world. We want young people to have an idea of how budgeting can work for them when they begin to make more money in their
careers and begin to take on more debt in order to do things like buy a house.
</p>
<div className="row mb-5">
<img src={river_hawk} className="col-4" alt="uml logo" />
<img src={budget_hero} className="col-4 offset-4" alt="budget hero" />
</div>
</header>
<div className="container h-100">
<div className="row h-100 align-items-center">
<div className="mt-4 col-12 text-center">
<img className="img-fluid col-8" src={umass_lowell} alt="uml campus" />
</div>
</div>
</div>
<p className="mt-5">We're four computer science students from UMass Lowell. Our names are Daniel Quinonez, Jacob Veber, Gabe Herrera, and Chris Olaf.</p>
<p className="mt-4">
Using Budget Buddy, we are hoping to help young people learn how to better take control of their finances. We know that it can be extremely
difficult to balance bills and other expenses at the same time as being a full-time student, so we want to make it as
easy as possible for students to quickly understand what their budget looks like. In addition, we want to help young people
make plans to pay off any loans they have needed to take out if, for example, they are a college student. This way, we hope that the
daunting task of managing debt while being a young adult with little or unstable income can be made easier.
</p>
<p className="mt-4 mb-5">
By helping the young demographic manage their way through debt, we are aiming to help them gain financial independence as soon as
possible, so that they can live their lives post-graduation with the most opportunities. Also, and possibly most
importantly, we hope that by using Budget Buddy, people gain an idea of how to effectively balance their budget.
This way, they will be able to manage their money in a more effective way after they graduate and move into the professional
world. We want young people to have an idea of how budgeting can work for them when they begin to make more money in their
careers and begin to take on more debt in order to do things like buy a house.
</p>
<div className="row mb-5">
<img src={river_hawk} className="col-4" alt="uml logo" />
<img src={budget_hero} className="col-4 offset-4" alt="budget hero" />
</div>
</div>
</>
);

5
src/pages/Dashboard.jsx
View file

@ -13,6 +13,7 @@ import QuickTransaction from '../components/QuickTransaction'
import CategorizedExpenses from '../components/CategorizedExpenses';
import CategorizedIncome from '../components/CategorizedIncome';
import { Typography } from '@mui/material';
import LoanCalculator from '../components/LoanCalculator';
export default function Dashboard() {
@ -30,7 +31,7 @@ export default function Dashboard() {
<ExpenseTotal />
</div>
</div>
<div className='row mt-3'>
<div className='col'>
<AddExpenseForm/>
@ -51,4 +52,4 @@ export default function Dashboard() {
</div>
</AppProvider>
);
}
}