From 9fc72b14ae606b89d7f486c99dcdc5b16cbd9e0c Mon Sep 17 00:00:00 2001 From: ninshot <140782230+ninshot@users.noreply.github.com> Date: Tue, 24 Oct 2023 16:32:25 -0600 Subject: [PATCH 1/2] Changes to vacation spending calculator --- .../src/pages/Vacation_Spending/vacation.js | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/Frontend/src/pages/Vacation_Spending/vacation.js b/Frontend/src/pages/Vacation_Spending/vacation.js index 7ab35811b..e7f2019cc 100644 --- a/Frontend/src/pages/Vacation_Spending/vacation.js +++ b/Frontend/src/pages/Vacation_Spending/vacation.js @@ -10,15 +10,16 @@ function Vacation(){ const [remainingBudget, setRemainingBudget] = useState(''); //variable for remaining budget const [expenseNameToDelete, setExpenseNameToDelete] = useState(''); //variable to delete the expense const [expenseTotal, setTotal] = useState(''); //varible for the total of all the expenses - /** * This function checks for valid input for the input given by the user */ const validateInput = (value) => { - if (value < 0) { + if (value <= 0 || value === null ) { alert("Enter a Valid Input"); - return 0; + setTotal(''); + setBudget(''); + return null; } return value; } @@ -27,9 +28,17 @@ function Vacation(){ * calculates the budget status and total simuntaneously */ const validateBudget = () => { - setRemainingBudget(budget); - calculateTotalExpenses(); - } + + if(budget === null || budget === 0) + { + setRemainingBudget(''); + setTotal('') + } + else{ + setRemainingBudget(budget); + calculateTotalExpenses(); + } + } /** This function handle the expenses entered by the user and checks if they are valid * or not and displays an error message according to that @@ -44,7 +53,6 @@ function Vacation(){ setTotal(expenseAmount); //addition of expense and amount to the expenses array setExpenses([...expenses, {name: expenseName, amount: parseFloat(expenseAmount)}]); - budgetUpdate(); setTotal(expenseTotal + expenseAmount); } @@ -53,7 +61,8 @@ function Vacation(){ } } else{ - alert("Enter a Valid amount") + setAmount('') + alert("Enter a Valid amount"); } } @@ -143,7 +152,7 @@ return( id="expense-amount" placeholder="Enter expense amount" value={expenseAmount} - onChange={(e) => setAmount((validateInput(parseFloat(e.target.value))) || 0)}/> + onChange={(e) => setAmount((validateInput(parseFloat(e.target.value))))}/> <button id="add-expense" onClick={validateExpense}>Add Expense</button> </div> <div> -- GitLab From ab9337d90fbeb72d5deec5e0c93a4e1a2d140cdc Mon Sep 17 00:00:00 2001 From: ninshot <140782230+ninshot@users.noreply.github.com> Date: Wed, 25 Oct 2023 13:48:47 -0600 Subject: [PATCH 2/2] made some changes to vacation claculator and fixed some erros --- .../src/pages/Vacation_Spending/vacation.css | 2 +- .../src/pages/Vacation_Spending/vacation.js | 37 +++++++++++-------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/Frontend/src/pages/Vacation_Spending/vacation.css b/Frontend/src/pages/Vacation_Spending/vacation.css index 19e0ebfe8..cc8b7c244 100644 --- a/Frontend/src/pages/Vacation_Spending/vacation.css +++ b/Frontend/src/pages/Vacation_Spending/vacation.css @@ -52,7 +52,7 @@ } #budget{ - margin-left: 30px; + margin-left: 27px; } #expense-name{ diff --git a/Frontend/src/pages/Vacation_Spending/vacation.js b/Frontend/src/pages/Vacation_Spending/vacation.js index e7f2019cc..571f94a6f 100644 --- a/Frontend/src/pages/Vacation_Spending/vacation.js +++ b/Frontend/src/pages/Vacation_Spending/vacation.js @@ -7,19 +7,19 @@ function Vacation(){ const [expenseName, setName] = useState(''); //variable for expense name const [expenseAmount, setAmount] = useState(''); //varaible for expense amount const [expenses, setExpenses] = useState([]); //array of all the expenses added - const [remainingBudget, setRemainingBudget] = useState(''); //variable for remaining budget + const [remainingBudget, setRemainingBudget] = useState(0); //variable for remaining budget const [expenseNameToDelete, setExpenseNameToDelete] = useState(''); //variable to delete the expense - const [expenseTotal, setTotal] = useState(''); //varible for the total of all the expenses + const [expenseTotal, setTotal] = useState(0); //varible for the total of all the expenses /** * This function checks for valid input for the input given by the user */ const validateInput = (value) => { - if (value <= 0 || value === null ) { + if (value < 0) { alert("Enter a Valid Input"); - setTotal(''); + setTotal(0); setBudget(''); - return null; + return 0; } return value; } @@ -28,11 +28,11 @@ function Vacation(){ * calculates the budget status and total simuntaneously */ const validateBudget = () => { - - if(budget === null || budget === 0) + const parsedBudget = parseFloat(budget); + if(isNaN(parsedBudget) || parsedBudget <= 0) { - setRemainingBudget(''); - setTotal('') + setRemainingBudget(0); + setTotal(0) } else{ setRemainingBudget(budget); @@ -48,7 +48,11 @@ function Vacation(){ * Display an error message */ const validateExpense = () => { //setting the remaining budget limit - if (parseFloat(expenseAmount) > 0 ){ + const name = expenseName.toString(); + if(name ===''){ + alert("Enter an expense name"); + } + else if (parseFloat(expenseAmount) > 0){ if(remainingBudget >= expenseAmount){ setTotal(expenseAmount); //addition of expense and amount to the expenses array @@ -62,7 +66,7 @@ function Vacation(){ } else{ setAmount('') - alert("Enter a Valid amount"); + alert("Enter a Valid amount"); } } @@ -96,6 +100,8 @@ function Vacation(){ setTotal(newtotal); setExpenses(newarray); setExpenseNameToDelete(''); + setAmount(''); + setName(''); } @@ -117,11 +123,12 @@ function Vacation(){ setName(''); //deleting the name of expense setBudget(''); //deleting the budget setAmount(''); //deleting the amount of the expense to zero - setRemainingBudget(''); + setRemainingBudget(0); setExpenseNameToDelete('') - setTotal(''); + setTotal(0); } + return( <div className="Vacation"> @@ -164,10 +171,10 @@ return( <button id="reset-button" onClick={resetExpenses}>Reset</button> </div> <div> - <label className='total-label' for = "total">Your Total Spending is: $ {expenseTotal} </label> + <label className='total-label' for = "total">Your Total Spending is: $ {parseFloat(expenseTotal).toFixed(2)} </label> </div> <div> - <label className = 'print-label' for = "budget">You still have ${remainingBudget} to spend</label> + <label className = 'print-label' for = "budget">You still have ${remainingBudget.toFixed(2)} to spend</label> </div> <br></br> <div> -- GitLab