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 with fully validated input

Kris Pietrzakβ€’ 340

@krisp-dev

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


This challenge was definitely the hardest so far, completed the main calculator functionality in a few hours but then was fixing bugs for a couple of days to make it perfect.

Please let me know if you find any bugs, I have tried to make this tip calculator as bulletproof as possible. It only accepts positive numbers for each input field, and doesn't accept periods . for the 'Number of People' field.

Community feedback

Account Deleted

Hi,

Nice one with the challenge, it works pretty well.

  • One thing I'd change, or rather add is give the numbers of the tip amount / person and total / person and maximum width because when they get very long they expand the container. Then you'll also put it in overflow : scroll and then remove the scroll bar because it won't look good; ::-webkit-scrollbar { display : scroll}. This way when the numbers get long they won't expand the container and will have a nice scroll to it to view the whole thing.

Keep codingπŸ‘.

Marked as helpful

1

Kris Pietrzakβ€’ 340

@krisp-dev

Posted

@thulanigamtee Thanks for that suggestion! I totally forgot to test it out using any bigger numbers πŸ˜‚

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