Tip Calculator App

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.

You're getting that error due to dividing by 0 for the total number of people. So:

1. 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 add value="0" step="0.01" min="0" attributes, for number of people you can add value="1" min="1" attributes, and for custom tip percentage you can add placeholder="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.
2. You should combine calculateBill and calculateTip 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)}`;
   };
   

3. Instead of onkeyup, you can use onchange="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.