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

Vanilla JS, Some Flex And Grid

@mrmotofoto

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


I stopped coding for about 1.5 years, so this my first attempt to build something. LOL! It seems the CSS Media Query isn't loading from Vercel, even though it is in the git repo. Anyway I don't have time to investigate at the moment, but it works locally...hahaha. But t was fun, anyway on to another!!!

Community feedback

Nam HaÏ 820

@Nam-Hai

Posted

First of all try to get as close as possible to the originale design. For exemple here the buttons need to have round edges. The bill and nb of people inputs were not suppose to have the "number" type. You could have add the error text in red when you put 0 person, as shown in the orignal design.

You also kind of cheated on the javascript part as you changed the reset button with a calculate button, which make the javascript fairly simpler.

If you stoped coding for a long time i'd suggest you to start with simpler design and quickier design to get back on track and have solide basis on the HTML/CSS, and to don't have to bother at first with the Js.

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