Tip Calculator App - with vanilla JS and CSS

Hey there, excellent work with this one!

• keyup to fire the function for custom input is totally fine approach. I think listening key is the most practical approach here for user experience. You can fire the function on input keyup aswell. After selecting the tip%, If the user changes the bill, nothing happens and I think it makes sense for the function to be fired on user input change aswell.
• Spin box on number inputs has no effect and I think visually looks bad in general. You can either use type:"text" and in JS use the value as Number(value) which is my preference. Or change the visual appearance of input in CSS as:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
}
/* This will support modern browsers but won't support older ones as they're relatively new. */

• Using form for input is totally fine here but by default, when submitted (enter key) page refreshes as it sends a get request. To prevent this you can prevent in JS after selecting form like:

form.addEventListener('submit', function(e) {
  e.preventDefault()
})

• You can center your container by:

html {
  height: 100%;
}

body {
  ...
  min-height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
}
/* You can remove the margin from body */
/* In general try not to give any margin, padding to body */

• Lastly for semantic markup, you can change your html layout in a way won't break the design:

<main>
  <h1>...</h1>
  <div class="calc-container">...</div>
</main>

<footer class="attribution">
  ...
</footer>

These are my suggestion to your solution. Excellent work again and happy coding :)