From 0125f6f9f743fa54bc93f62883a8675ed8159633 Mon Sep 17 00:00:00 2001 From: danielq65 Date: Fri, 28 Apr 2023 10:57:16 -0400 Subject: [PATCH] updated settings/loan calculator/add transaction Strengthened form validation in the settings page, fixing an input bug with whitespaces. Added form validation to the loan calculator and add transaction widgets --- src/components/AddExpenseForm.js | 146 ++++++++++++++++++------------- src/components/LoanCalculator.js | 78 ++++++++++++++--- src/pages/Settings.jsx | 35 +++----- 3 files changed, 158 insertions(+), 101 deletions(-) diff --git a/src/components/AddExpenseForm.js b/src/components/AddExpenseForm.js index ba3241b..cbaa802 100644 --- a/src/components/AddExpenseForm.js +++ b/src/components/AddExpenseForm.js @@ -123,76 +123,98 @@ const AddExpenseForm = (props) => { setCost(event.target.value) } + (() => { + // 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('submit', event => { + if (!form.checkValidity()) { + event.preventDefault(); + event.stopPropagation(); + } + + form.classList.add('was-validated') + }, false) + }) + })() + return (

Add Transaction

-
-
-
- - setCost(event.target.value)} - /> -
-
- - +
+
+
+
+ + setCost(event.target.value)} + /> +
+ Please enter a valid amount +
+
+
+ + +
-
- -
-
- - - - - - + +
+
+ + + + + + +
-
-
-
- - - +
+
+ + + +
-
+
); }; diff --git a/src/components/LoanCalculator.js b/src/components/LoanCalculator.js index 98d795d..aec17fc 100644 --- a/src/components/LoanCalculator.js +++ b/src/components/LoanCalculator.js @@ -8,7 +8,9 @@ const LoanCalculator = () => { const [monthlyPayment, setMonthlyPayment] = useState(0); const [interestPaid, setInterestPaid] = useState(0); - const calculateMonthlyPayment = () => { + const calculateMonthlyPayment = (event) => { + event.preventDefault(); + const percentageToDecimal = (percent) => { return percent / 12 / 100; } @@ -24,21 +26,69 @@ const LoanCalculator = () => { setInterestPaid(monthlyPayment * (loanDuration * 12) - loanAmount); }, [monthlyPayment]); + (() => { + // 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('submit', event => { + if (!form.checkValidity()) { + event.preventDefault(); + event.stopPropagation(); + } + + form.classList.add('was-validated') + }, false) + }) + })() + return (
-

Loan Calculator

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

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

Principal Paid: ${loanAmount}
-
Interest Paid: ${interestPaid.toFixed(2)}
- - +

Loan Calculator

+ + +
+
+
+ + setLoanAmount(event.target.value)} required/> +
+ Please enter a valid loan amount +
+ Loan amount must be of at least $1,000 +
+
+
+ + setInterestRate(event.target.value)} required/> +
+ Please enter a valid interest rate +
+ Interest rate must be of at least 5.0% +
+
+
+ + setLoanDuration(event.target.value)} required/> +
+ Please enter a valid loan duration in years +
+ Loan duration cannot be less than 2 years +
+
+
+ +
+

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

Principal Paid: ${loanAmount}
+
Interest Paid: ${interestPaid.toFixed(2)}
+ +
+
+ +
) diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx index f5f1e99..3368154 100644 --- a/src/pages/Settings.jsx +++ b/src/pages/Settings.jsx @@ -129,16 +129,6 @@ const Settings = () => { }) })() - // 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') - } - }*/ - return ( <>
@@ -161,18 +151,18 @@ const Settings = () => {
- setFirstName(event.target.value)} required/> + setFirstName(event.target.value)} required/>
- Please enter a new first name + Please enter a valid new first name
- setLastName(event.target.value)} required /> + setLastName(event.target.value)} required/>
- Please enter a new last name + Please enter a valid new last name
@@ -187,7 +177,7 @@ const Settings = () => {
- setCurrentPassword(event.target.value)} required /> + setCurrentPassword(event.target.value)} required/>
Please enter your current password
@@ -196,11 +186,13 @@ const Settings = () => {
- setNewPassword(event.target.value)} required /> + setNewPassword(event.target.value)} required/>
- Please enter a new password + Please enter a valid new password
Your new password must be at least 8 characters long +
+ It cannot have whitespace at the start or end of it
@@ -210,13 +202,6 @@ const Settings = () => {
- {/*

Dark Mode

- -
- - -
*/} -

Account Settings

Delete Your Account
@@ -224,7 +209,7 @@ const Settings = () => {
- setDeleteAccount(event.target.value)} required /> + setDeleteAccount(event.target.value)} required/>
Please enter your current password in order to delete your account