Skip to content
Submitted about 2 years ago

TIP CALCULATOR WITH ADDED FUNCTIONALITY

Amos•470
@fistty
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

⭐ Tip % input darkens when you press the buttons ⭐ When the addition of number of people is 0, it shows the error message (not just when there's one zero) ⭐You can select and unselect the percentage button ⭐ Displays calculation instantly

Community feedback

  • Luis Jorge Chávez Cernas•210
    @LuisjorPosted about 2 years ago

    Hello! Very well done. I just have some suggestion.

    • You should also add a restrictions to less than 0 persons/tip/bill.
    • The Tips boxes sections is not the same width as the inputs bars, maybe you wan't to check that. I'm not that savvy, but maybe try grid-templete-column: 1fr 1fr 1fr; instead of: grid-template-columns: repeat(3, 7.3125rem);)
    0

Please log in to post a comment

Log in with GitHub

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