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!
