Skip to content
Submitted over 3 years ago

Responsive tip calculator

Luiz Claudio Costa•30
@luizclaudiocosta
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I spent some time learning more about masking currency. Please, comments and reviews are always welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • Mariusz Olszewski•360
    @molszewski34

    I don't know but i will check if there is any easy way to do it w/o js.

    Marked as helpful
  • Mariusz Olszewski•360
    @molszewski34

    Hey. It is one of better aproaches to what should be provied inside input. Most of solutions goes with step="1" which is not real in every scenario when someone pays with cents.

    But why you don't used input type number with step="0.1" which gives you the same thing with less effort and you can also edit those numbers in easier way ?

    Also it is not must have but reset button should look active when there is any change in status.

    Marked as helpful
  • Mariusz Olszewski•360
    @molszewski34

    Still didn't get an answer about this, but one thing concerns me right now. Is us-eu currency format for input even a good thing to set in hmtl. Comma is another sign for javascript which can disrupt a whole calculation when not used with some methods. So you probably need javascript for this anyway which is not an answer for question :)

    Marked as helpful
  • Luiz Claudio Costa•30
    @luizclaudiocosta

    Hi. Thank you very much for your review.

    Initially I used "type number" and "step .01", but I would like to have the bill field in currency format, with the "comma of the thousand". So I took the challenge to research how to do this with regular expressions. Is there any way to do this just with HTML and CSS?

    About the reset button, I completely forgot! It's already fixed. Thank you so much again.

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