diff --git a/src/components/FormInputGroup.js b/src/components/FormInputGroup.js new file mode 100644 index 0000000..35f87db --- /dev/null +++ b/src/components/FormInputGroup.js @@ -0,0 +1,12 @@ +import React from "react"; + +const FormInputGroup = ({text, placeholder, value, onInput}) => { + return ( +
+ + +
+ ) +}; + +export default FormInputGroup; \ No newline at end of file diff --git a/src/components/LoanCalculator.js b/src/components/LoanCalculator.js new file mode 100644 index 0000000..8f2983e --- /dev/null +++ b/src/components/LoanCalculator.js @@ -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 ( + <> +

Loan Calculator

+ +
event.preventDefault()}> + setLoanAmount(event.target.value)}/> + setInterestRate(event.target.value)}/> + setLoanDuration(event.target.value)}/> + +

+ Monthly Payment: ${parseFloat(monthlyPayment.toFixed(2))} +

Principal Paid: ${loanAmount}
+
Interest Paid: ${parseFloat(interestPaid.toFixed(2))}
+ + + + + ) +}; + +export default LoanCalculator; \ No newline at end of file diff --git a/src/pages/About-Us.jsx b/src/pages/About-Us.jsx index 4bd798e..850ebb1 100644 --- a/src/pages/About-Us.jsx +++ b/src/pages/About-Us.jsx @@ -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 ( <>
-
+
+
+
+
+

About Us

+

Budget Buddy

+
+
+
+
+
-
+
-

About Us

-

Budget Buddy

+ uml campus +
-
-
- -
-
-
- uml campus -
-
-
- -

We're four computer science students from UMass Lowell. Our names are Daniel Quinonez, Jacob Veber, Gabe Herrera, and Chris Olaf.

+ +

We're four computer science students from UMass Lowell. Our names are Daniel Quinonez, Jacob Veber, Gabe Herrera, and Chris Olaf.

-

- 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. -

+

+ 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. +

-

- 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. -

+

+ 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. +

-
- uml logo - budget hero -
+
+ uml logo + budget hero +
); diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index e8ae087..5837a92 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -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() { - +
@@ -51,4 +52,4 @@ export default function Dashboard() {
); - } \ No newline at end of file + }