created loan calculator widget

added component loan calculator as well as its associated form input group component. Modified the dashboard page to include the loan calculator

src/components/FormInputGroup.js

@@ -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;

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 (
+        <>
+        <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;

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 (
         <>
         <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>
         </>
     );

src/pages/Dashboard.jsx

@@ -10,6 +10,7 @@ import RemainingBudget from '../components/Remaining';
 import AddIncome from '../components/AddIncome'
 import CategorizedBudget from '../components/CategorizedBudget';
 import { Typography } from '@mui/material';
+import LoanCalculator from '../components/LoanCalculator';
 
 export default function Dashboard() {
   return (
@@ -44,7 +45,7 @@ export default function Dashboard() {
 					</div>
 					<div className='col-12 col-lg-6'>
 						<div className='widget'>
-
+							<LoanCalculator/>
 						</div>
 					</div>
 				</div>