Skip to content
Submitted over 2 years ago

Tip Calculator with Javascript, HTML, SCSS

Devika Sujith•175
@DCoder18
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

Hey guys, this is my first javascript project here. It was fun to do. The only part I found challenging was the user's ability to add a custom tip. I wasn't sure how I would trigger it since there wasn't a button linked to it in the design. I figured I'd just use the enter key to submit their custom tips. Its not the most efficient or user friendly but I couldn't think of anything else.

Let me know what approach some of you took and feel free to suggest any improvements :)

Thanks!

Community feedback

  • Curtis Simpson•550
    @crsimpson5Posted over 2 years ago

    Hey Devika, great job on your solution 👍

    You can use an input event listener on your input fields to calculate the tip every time a number is typed in.

    Example:

    customTipInput.addEventListener("input", calculateTip);

    Input event MDN

    Marked as helpful
    1
    Devika Sujith•175
    @DCoder18Posted over 2 years ago

    @crsimpson5 Oh wow! I didn't even know I could add input as an event listener. Thank you so much Curtis!

    1
  • Edgar Fernando Britez•355
    @edgarfbPosted over 2 years ago

    Hi, Davika. It's looking goog! Congrats! I think that you approch if fine because you use just js for this. You have to use some kind of state if you want to use the value that you pass via costo field. Like one variable that manage all the button's values and the input field.

    Issue: >>> If you pass it a non-number value you get a NaN displayed. Check it out.

    Marked as helpful
    1
    Devika Sujith•175
    @DCoder18Posted over 2 years ago

    @edgarfb Nice find! Thank you! I'll try to fix that.

    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