Design comparison
Solution retrospective
Does anyone have any tips for overriding when it displays NAN and Infinity when just one value is input? I've been trying for longer than I'd like to admit to solve it on my own, but nothing seems to be working. I think it may have something to do with the calculator trying to calculate while not all the input fields have values, but I can't seem to figure out a solution.
Community feedback
- @PacoNavarretePosted over 1 year ago
Hi @Keilay, It's a very nice work that have done here, regarding about you question:
I can see that you're triggering the calculateBill() and calculateTip() into three sections but none of them validate that they've receive all the data prior to make the calculus, seems like when any of the previous functions are called you got undefined values between 34-37 lines, and between 60-62 lines, (undefined * number = NaN )
Try to manage the state of each input, and use it to validate that user enter all the fields prior to perform the calculus.
Sounds interesting! I will pull your code from github and try to solve it, and let you know the code.
0@kileybelangaPosted over 1 year ago@PacoNavarrete Thank you for the feedback! I will look into your suggestion!
1@PacoNavarretePosted over 1 year agoHi @kileybelanga You can see now my pull request on github, if you want to check out what is a pull request, you can read this article of freecode camp, basically is a nice way to contribute with other repositories. (https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/).
1 - @ozzy1136Posted over 1 year ago
You're getting that error due to dividing by 0 for the total number of people. So:
- Instead of using
<input type="text"/>
, I recommend using<input type="number"/>
for the bill amount, number of people, and custom tip percentage. For the bill amount you could addvalue="0" step="0.01" min="0"
attributes, for number of people you can addvalue="1" min="1"
attributes, and for custom tip percentage you can addplaceholder="Custom" min="0"
attributes. With a text input, there is the chance that a user inputs letters or other characters that are invalid when you calculate the tip and total per person. - You should combine
calculateBill
andcalculateTip
into one function, because you are calculating the same variables in both functions. For example:function handleInputChange(e) { e.preventDefault(); // No need to cast value to a number type since you're using number inputs now const bill = billInput.value; const people = numberOfPeopleDiv.value; let tip; if (id == "tipButtonOne") { tip = tipButtonDivOne.value; } else if (id == "tipButtonTwo"){ tip = tipButtonDivTwo.value; } else if (id == "tipButtonThree"){ tip = tipButtonDivThree.value; } else if (id == "tipButtonFour"){ tip = tipButtonDivFour.value; } else if (id == "tipButtonFive"){ tip = tipButtonDivFive.value; } else { tip = customTipInputDiv.value; } const tipPercentage = tip / 100; const tipAmount = bill * tipPercentage; // Be careful using innerHTML, you can find plenty of articles for why perPersonTipDiv.innerText = `$${(tipAmount / people).toFixed(2)}`; perPersonTotalDiv.innerText = `$${((tipAmount + bill) / people).toFixed(2)}`; };
- Instead of
onkeyup
, you can useonchange="handleInputChange"
when working with updating input elements.
That should get you to a good spot. There are some other things you could do like creating a variable that saves the last clicked tip percentage, so you can remove the if...else statements and just get the value of that variable.
0@kileybelangaPosted over 1 year ago@ozzy1136 Thank you for the suggestions! I will give them a try:)
0 - Instead of using
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord