danielq65
3 years ago
committed by
GitHub
parent
9876756680
commit
e2d7c456c1
@ -1,3 +1,54 @@
|
||||
import umass_lowell from './images/umass_lowell.jpeg'
|
||||
import river_hawk from './images/river_hawk.png'
|
||||
import budget_hero from './images/budgethero1.png'
|
||||
|
||||
export default function AboutUs() {
|
||||
return <h1>About Us</h1>
|
||||
return (
|
||||
<>
|
||||
<div className="container overflow-auto">
|
||||
<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="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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,3 +1,125 @@
|
||||
export default function Settings() {
|
||||
return <h1>Settings</h1>
|
||||
// javascript for the updated username and password alerts
|
||||
const handleNameClick = () => {
|
||||
const alert = '<div class="alert alert-success alert-dismissible" role="alert">Name updated successfully!<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
|
||||
document.getElementById('nameAlert').innerHTML = alert;
|
||||
}
|
||||
|
||||
const handlePasswordClick = () => {
|
||||
const alert = '<div class="alert alert-success alert-dismissible" role="alert">Name updated successfully!<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
|
||||
document.getElementById('passwordAlert').innerHTML = alert;
|
||||
}
|
||||
|
||||
(() => {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const forms = document.querySelectorAll('.needs-validation')
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.from(forms).forEach(form => {
|
||||
form.addEventListener('click', event => {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
form.classList.add('was-validated')
|
||||
}, false)
|
||||
})
|
||||
})()
|
||||
|
||||
// toggle between light mode and dark mode
|
||||
const toggleDarkMode = () => {
|
||||
if (document.documentElement.getAttribute('data-bs-theme') === 'dark') {
|
||||
document.documentElement.setAttribute('data-bs-theme','light')
|
||||
}
|
||||
else {
|
||||
document.documentElement.setAttribute('data-bs-theme','dark')
|
||||
}
|
||||
}
|
||||
|
||||
// JSX: Javascript XML
|
||||
return (
|
||||
<>
|
||||
<div className="container overflow-auto">
|
||||
<h4 className="mt-4 mb-4">Profile Settings</h4>
|
||||
|
||||
<h5 className="mb-4">Email and Name</h5>
|
||||
<form className="needs-validation" noValidate>
|
||||
<div className="row mb-3">
|
||||
<label htmlFor="staticEmail" className="col-2 col-form-label">Email</label>
|
||||
<div className="col-4">
|
||||
<input type="text" readOnly className="form-control-plaintext" id="staticEmail" value="daniel_quinonezrosario@student.uml.edu" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<label htmlFor="currentName" className="col-2 col-form-label">Current Name</label>
|
||||
<div className="col-4">
|
||||
<input type="text" readOnly className="form-control-plaintext" id="currentName" value="Daniel" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<label htmlFor="newName" className="col-2 col-form-label">New Name</label>
|
||||
<div className="col-4">
|
||||
<input type="text" className="form-control" id="newName" required />
|
||||
<div className="invalid-feedback">
|
||||
Please enter a new name
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nameAlert"></div>
|
||||
<div>
|
||||
<button type="button" className="btn btn-primary mb-5" id="newNameButton" onClick={handleNameClick}>Change Name</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h5 className="mb-4">Password</h5>
|
||||
<form className="needs-validation" noValidate>
|
||||
<div className="row mb-3">
|
||||
<label htmlFor="currentPassword" className="col-2 col-form-label">Current Password</label>
|
||||
<div className="col-4">
|
||||
<input type="password" className="form-control" id="currentPassword" minLength="8" required />
|
||||
<div className="invalid-feedback">
|
||||
Please enter your current password
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<label htmlFor="newPassword" className="col-2 col-form-label">New Password</label>
|
||||
<div className="col-4">
|
||||
<input type="password" className="form-control" id="newPassword" minLength="8" required />
|
||||
<div className="invalid-feedback">
|
||||
Please enter a new password
|
||||
<br />
|
||||
Your new password must be at least 8 characters long
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="passwordAlert"></div>
|
||||
<div>
|
||||
<button type="button" className="btn btn-primary mb-5" id="newPasswordButton" onClick={handlePasswordClick}>Change Password</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h4 className="mb-4">Dark Mode</h4>
|
||||
|
||||
<div className="form-check form-switch mb-5">
|
||||
<input className="form-check-input" type="checkbox" id="darkModeCheckbox" onClick={toggleDarkMode}/>
|
||||
<label className="form-check-label" htmlFor="darkModeCheckbox">Enable Dark Mode</label>
|
||||
</div>
|
||||
|
||||
<h4 className="mb-4">Account Settings</h4>
|
||||
|
||||
<div className="mb-4">
|
||||
<button type="button" className="btn btn-danger">Delete Account</button>
|
||||
<br />
|
||||
<div className="mt-2">
|
||||
CAUTION: This will delete your account. All account and profile data
|
||||
will be completely erased.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in new issue