Tip Calculator App

What are you most proud of, and what would you do differently next time?

I'm proud of the fact that within this project. I had to think about the user behaviour such as if the user focuses the custom tip percentage I have to uncheck any radio buttons as this indicates that the user wants to enter a custom tip percentage.

I also used inputs of type text rather than number because I couldn't hide or find a way to hide the spin buttons that comes with input of types number in a standard way across browsers. however I did attached keydown event handlers to text inputs to disallow the user from inputting letters. so they mimic inputs of type number.

What challenges did you encounter, and how did you overcome them?

The challenges that I had encountered was validating the data as it is being changed by the user and when we have all of the data that is required to make a calculation we update the display to show the results.

For that I used a form and inputs of type text and radio with the attributes required and pattern for validation. on the javascript side I have listened for change events on the inputs and used the Constraint Validation API to validate the inputs. whenever an input is changed we also check if we have all required information to start a calculation if there is we update the display.

What specific areas of your project would you like help with?

I tried to use BEM to structure my CSS and HTML Classes. It's always an aim for me to have structured and readable code.

I'd like to know if you found my code readable, understandable and follow best practices.

As always thank you for viewing my solution!