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

Tip calculator app

@MundiaNderi

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

P
Tsukimi 270

@hikawi

Posted

Hello there

  • First thing I noticed is clicking the tips first when loading in yielded an error, even though both fields look like they are filled correctly, this is probably a problem with styling placeholder at full opacity, instead of kinda transparent to show that they're just placeholders.
  • The number of people field is validated, but forgot the case where the input can be floating points, and the results still calculate as if nothing is wrong.
  • There are also no error states and active states so I had to double back to see if I was in the correct input box. Inputting bad values don't show any effects visible and only seen after clicking a tip button. Labels are also not used for input boxes.
  • Custom tip button doesn't work and just output NaN.
  • The mobile design doesn't completely fill the screen and leaves a different padding, even though this is a small mistake.
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