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

Calculator App with theme switcher using SCSS + Vanilla JS

Maria 70

@mcosme000

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Since I've never done a calculator app and thought it was about time, I choose this challenge as my very first at Frontend Mentor. It's been a long time since I used Vanilla JavaScript, so this was a good practice.

About the styling, it was very useful to have the style guides so that I don't spend a lot of time thinking about color, fonts and so on... However, I DID spent time setting the classes for the three different themes. At first I was using CSS, but I switched to SCSS so that I can reduce the number of lines. Also, the toggle element was tricky so I had to do a little of research online to figure out how to make it...!

Also, I added some code to display the current numbers and the operator on the top on the screen, not only the final result.

Problems I had with this challenge At first I used Webpack to bundle the JS code but I was having problems to deploy it, so I decided, just for this time, to compile the code with a simple cat command. I know it is not the optimal solution, so I will definitely solve this problem and post it as another solution!

Community feedback

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