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

@amutsamoses

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
Christina 190

@codercreative

Posted

Hi @amutsamoses,

Your Tip Calculator looks awesome!

I just have a few suggestions:

Hover State:

  • Add a hover state (lighter green) for the tip buttons and the custom tip button

Error message for input validation:

  • Even though the design did not specify it, perhaps add an error message if the user does not enter an amount in the bill input field.

Reset button color:

  • My personal preference: I would either have the reset button be a light cyan color from the get-go -- or make it turn into a light cyan when the user enters data into the input fields for greater user experience.

Accessibility with fieldset:

  • Also for accessibility, you may consider using fieldset to group related inputs together (I just learned about this myself today)

Happy Coding!

0
cassiopeia 160

@cassiopeia001

Posted

could be improved, otherwise works well enough.

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