Tip calculator made using CSS Flexbox/Grid and Javascript

Hi Meobot, your solution looks great! Regarding functionality, it looks like if I click on the button before inputting the number of people, the total area shows "infinity". What I did was, I added a line in my code that checks whether all the 3 values are there before calculating, and that way it won't show other unwanted results. Also, it would be good to have the button "stick" as a pressed state after clicking because right now it just goes back to looking like other buttons after being pressed.

Regarding refactoring, I see that you got an event listener written for each individual button. I would just use one. What I'd do is, I'd add a value directly onto each button, like this:

<button class="btn" id="five" value="5">5%</button>

And then I'd grab all the buttons and put an event listener on each one, something like this:

document.querySelectorAll(".btn").forEach( btn => {
  btn.addEventListener("click", () => {
    tip = btn.value;
    calculateFinal(tip);
  })
})

I think this can save you a few lines of code! Hope this is helpful 🙂