Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Tip Calculator

P
Samuel Adu 1,010

@samuel-adu

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@rejin-kumar

Posted

First of all well designed, its an exact replica. Few things I noticed though: Your calculations seem to take 15% by default without the button for 15 being active. The calculations seem to happen in the initial stage where the number people have not been entered, essentially assuming it to be for 1 person by default while the number of persons field shows 0. The user can delete the number of persons and your calculations say Infinity (Js dividing by 0). You can improve the code by having the calculations show 0 until all the fields have been entered. You can also use radio buttons instead of normal buttons for tips, this will simplify the logic a lot. Hope it helps :)

Marked as helpful

1

P
Samuel Adu 1,010

@samuel-adu

Posted

@rejin-kumar thank you for this feedback, I have taken them into account and made changes, Althouh I left the tips options as button because I believe it is semantically a better element to use in that situation than a radio button.

You are welcome to look over it again.

0
samir-Deve 350

@samir-Deve

Posted

well designed !

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord