gabehf
/
BudgetBuddy
mirror of https://github.com/gabehf/BudgetBuddy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
main
jveebs 3 years ago
parent e90e8d413e 81c9cf3f8c
commit 8f72d73601
4 changed files with 98 additions and 37 deletions
Show Stats Download Patch File Download Diff File

12
src/components/FormInputGroup.js
Unescape 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
Unescape 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;

69
src/pages/About-Us.jsx
Unescape 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>
</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-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">
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>
<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 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>
</>
);

1
src/pages/Dashboard.jsx
Unescape 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() {

Write Preview
Loading…
Cancel
Save