
Calculator App with theme switcher using SCSS + Vanilla JS
Design comparison
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 GitHubJoin 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