Skip to content
Submitted about 3 years ago

Responsive Calculator - CSS + JS

P
Ryan McGuire•280
@mackieva
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The one area I'd like to see what others did, the percentage buttons and how that was value was determined when clicked. I just did an if statement checking the ID and setting it there so I'm looking forward to seeing a different way.

Code

Please log in to post a comment

Log in

Community feedback

  • Devika Sujith•175
    @DCoder18

    Hi Ryan, Good job! Regarding your question about the percentage buttons, I used something called data attributes. It allows you to store custom data from within the html itself!

    For example, I have the following percentage button with a data attribute I called data-tip-amount.

    <button type="button" data-tip-amount="5" >5%</button>

    And then in javascript, I stored the tip amount in a variable using the getAttribute method.

    tip = Number(btn.getAttribute('data-tip-amount'))

    Hope you find this helpful :)

    Marked as helpful
  • Fazza Razaq Amiarso•2,320
    @fazzaamiarso

    Hello Ryan! Solid work!

    I just have a quick improvements.

    • When comparing values, it's preferable to always use strict equal(===) instead of loose equal(==). Strict equal prevent your values type to be coerced or converted to matching type. So, it's better because it's explicit about types.
    • You should switch the top most wrapper div with a main tag. So, your contents are inside a landmark.
    • You should increase all heading level below h1 by 1 to prevent skipping heading level.

    I hope it helps! Cheers!

    Marked as helpful

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