Skip to content
Submitted over 3 years ago

Responsive Mini Calculator using SASS and BEM

Ahmad Syafiq Aqil Wafi•170
@Syafiqjos
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

Hi! This is my first javascript challenge on this website. This also my first time using SASS and SCSS but I already using BEM Style for a while.

I have a question about Input text. The text seems to be cropped from inside, I tried to enlarge the padding on the input text field, but it didn't change at all. As example try to write number 1, the top of 1 will be cropped. Is there any idea how to fix this ?

By the way, any feedback is appreciated!

Community feedback

  • Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    Hi Syafiqjos👋, Great work on completing the challenge ... I check the tip of no 1 as you said but the problem is not with input fields its the font ... the font style: Space Mono you are using has the same 1 style which appears to be cut ... But i Found another major issue in your calculator ... For instance 100 is total bill and tip % is 5% so the total should be $105 but yours appears 1005 (the no of people is 1 always). I have attached the screenshot link: https://i.imgur.com/2GX3mkO.png

    Marked as helpful
    1
    Ahmad Syafiq Aqil Wafi•170
    @SyafiqjosPosted over 3 years ago

    @Skyz03

    Hi Sky,

    You're right haha, I realized after checking google fonts, that the font style is actually like that. I thought it's been cropped for some reason..

    Also thank you so much for providing the explanation and screenshot about my errors. So I could tests and try to match it with your advice. After I checked, my calculation actually was right, it's become 1005 because of string concat (100 + '5'). I don't know which one cause that, but after I put Number parse it's worked as it should.

    Thank you again for the feedback!

    1
  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago
    • check the totals the calculations are wrong. `a bill of 100 for 1 person at 5% gives you a total of 1005.

    happy coding

    1
    Ahmad Syafiq Aqil Wafi•170
    @SyafiqjosPosted over 3 years ago

    @ChamuMutezva

    Hi chamu,

    You're right! Thanks for the correction!

    It's fixed now!

    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