Skip to content
Submitted about 3 years ago

Tip calculator with fully validated input

Kris Pietrzak•340
@krisp-dev
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

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-devPosted about 3 years ago

    @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

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