👆🏽 click to check the live page
This is a tip calculator. You can also use it to calculate the amount to split with your friends.
Tech used: HTML, CSS, JavaScript
Use change as the event listener trigger type
The value retrived from input element is a string. If we want to to the calculation on that, we should convert to numbers using Number(string), converting back to string is number.toString().
Use ::placeholder for most of the modern browser now. (IE9 and lower doesn't support.)
Use the same property but add inset to indicate that the shadow is insetted.
For number type input, we can use min or max attributes to restrict the range of the number.
The used case here is returned by Element.classList. It's not an array so most of the array methods are not able to apply on it except .forEach(). If we were to revise this DOMTokenList, we should use add() or remove() to do that.