Tip calculator app using HTML, CSS, and JavaScript

Hello HaYeong,

the calculator works, well done. Now for the JS part, I would recommend you try the forEach loop on all buttons except the custom one. What I mean is a setup something like this:

First the HTML setup for the buttons

            <input
              type="button"
              value="5%"
              class="btn-tip"
            />
            <input
              type="button"
              value="10%"
              class="btn-tip"
            />

Now we can gather all the buttons in JS and run a loop over them:

const tipButtons = document.querySelectorAll('.btn-tip');  // all the buttons

tipButtons.forEach(btn =>
  btn.addEventListener('click', function (e) {

    // on every clicked button remove the % symbol, only the value remains, store it in a variable
    const clicked = e.target.value.slice(0, -1); 

      // some sample calculations you can do with the "clicked" variable
      const billPerPerson = billAmmount.value / peopleNum.value;
      const tipPerPerson = (billPerPerson / 100) * clicked;
      const totalToPay = billPerPerson + tipPerPerson;
    
      // finally displaying the desired calculations example
      tipAmntPerPerson.textContent = '$' + tipPerPerson.toFixed(2);
    }
  })
);

You can also add some if/else statements inside the loop so for example calculations for "people < 1" are not done. This will probably shorten your code by 90% and clean it up a lot. Hope this was helpful and keep at it!