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

Adeniyi Smartā€¢ 520

@Iamweird2

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback highly appreciated :D

Community feedback

Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the options under "Select a tip" need to be in a heavier font weight. Secondly the numbers in the calculator needs to be bigger.

I hope this helps

Cheers Happy coding šŸ‘

Marked as helpful

1
Curtis Simpsonā€¢ 550

@crsimpson5

Posted

Hey Adeniyi, nice solution!

Quick tip: you can use the outline property instead of border on your input hover style to prevent the content shift.

Example:

.input:hover {
  outline: 3px solid green;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Keep up the good work šŸ‘

Marked as helpful

0

Adeniyi Smartā€¢ 520

@Iamweird2

Posted

@crsimpson5 I will do just that. Thanks

1

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