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 using Flexbox and CSS Grid

@IgnatiusVisnu

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 managed to make the features work, but I still don't understand how to make the code HTML Semantics. I'm also not sure if there's a better way to position the "SPLITTER" text and to make number of people input form border red as I put 0 number (it only turns red after I click somewhere outside the form, I think it's overridden by input form focus default of the form control). Any suggestions are definitely welcome

Community feedback

@guisantosfr

Posted

Hi, Ignatius! I also completed this challenge recently.

A little suggestion for you is to include type=number on Bill, Custom and Number of people inputs, to allow only numbers and avoid Nan as results.

Happy coding 😉

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