Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Mini Calculator using SASS and BEM

@Syafiqjos

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

Sky 945

@Skyz03

Posted

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

@Syafiqjos

Posted

@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
P
Chamu 12,970

@ChamuMutezva

Posted

  • 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

@Syafiqjos

Posted

@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
Discord logo

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