Responsive tip calculator app using HTML, CSS, JS, Grid and Flexbox

Hi, Yassine! I've recently completed the same challenge and got interested in your solution to find out how else I could have handled the inputs and get the desired result. Should admit that your way of using the onchange event on the form element looks more reasonable than applying the focusout event on each input as I did 🙂

Anyway, the problem I encountered while testing your app is that it doesn't handle the cases when a user types 0 in the bill and people inputs. If you type 0 in both inputs, you get the result "$NaN" in the "Tip amount" and "Total" fields. When you set a valid value to the bill input but then type 0 in the people input, you get "$Infinity" as a result of the calculation.

This issue is easy to fix by adding additional conditions for bill.value, like:

else if (bill.value == "0") {
    bill.style.border = "2px solid hsl(0, 88%, 66%)";
    error[0].classList.add("active");
    error[0].textContent = "Can't be zero";
    valid = false;

and the same for people.value:

else if (people.value == "0") {
    people.style.border = "2px solid hsl(0, 88%, 66%)";
    error[1].classList.add("active");
    error[1].textContent = "Can't be zero";
    valid = false;

and then you'll also need to add one more condition to check if the form is valid:

if (
    bill.value <= 500000 &&
    people.value !== "" &&
    people.value != "0"&&
    (checkedButton || customTip)
  ) {
    valid = true;
  }

I'm sorry if the solution to the problem was obvious enough to elaborate on it, but I just wanted to make sure you get me right 🙂

Awesome job! Looks exactly as design, animation, inputs works good. I found small CSS problem just in case if u want to improve the project. Reset button on preview website light green with black text. I'm using Chrome, btw.