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 layout using HTML CSS and JAVASCRIPT

@srinivasteja18

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

Nam HaÏ 820

@Nam-Hai

Posted

For the Tip percent Button you could have use Flexbox and give it the attribut justify-content: space-between; so that the button takes the whole place and be centered and use a the wraping attribute for responsive. If you want to use grid, make sure the component are centered, you could have done it by giving it : grid-template-columns: repeat(3, 1fr); so it takes all the place possible.

The reset button don't reset the Tip amout / person and the Total / person. For a userfriendly design, you could also gave the reset button a hover effet.

1

@srinivasteja18

Posted

@BlueTompon Thanks for your valuable feedback. I will look into it. And for the reset button, I forgot to reset Tip amount and Total amount, Thanks for pointing out. This is really helpful !!

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