Hey, congrats for completing the challenge. I want to make some suggestions in a hope they might help:
-
you used <li> elements for tip percentages. form the UX point of view, we generally use the interface from top to bottom. I entered $100 and clicked for example %15, it only showed hover state but did not stay that way, after that I entered num of people but I had to come up again and click one of percentages again for calculation to happen.
-
instead you can wrap all elements in a form and this way user can use them in any order. To achieve this you can use radio buttons for percentages, you can style their wrapper box as you like and with css you can hide circles.
-
and for the reset button, you don't have to use JS if you follow the above suggestion. There is a "form" attribute you can use for any input. By using this, you can tie a button or input element to a form that it is not inside of that form. This concept is important and along your front end journey it will help you a lot. you can have a look at the following resources to understand this concept better: