Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Tip calculator app

accessibility, bem, sass/scss
James•340
@James-alderson
A solution to the Tip calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I finally managed to finish this challenge.

It took me a long time to create the js part of the challenge because this was the first calculator challenge I created. I have tested this challenge several times and in different ways to avoid the problem as much as possible (although there may still be some unsolved problems).

The next part of the time was spent on customizing the radio buttons, it wasn't too hard, but it took a while to get the accessibility issue resolved and to be able to work with the calculator using the keyboard buttons (tab and spacebar).

Actually, this is the first challenge where I added "sass build process" to the challenge. which automatically converts the sass code to css by entering the command "npm run build" and then adds all the necessary vendor prefixes to it. Of course, I am a beginner in this new knowledge and I need to spend time improving my knowledge. (I will probably use gulp in the next project).

I am impatiently waiting for your suggestions and criticisms to write better sass and js codes.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on James's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License