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 Calculator using SASS

Caio Couto 150

@CaioCouto

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


Hello there!

In this project I decided to go without any framework, just the good ol' semantic HTML5, CSS and Vanilla JS (I kind of enjoy doing things without the complexity of a framework).

Although the challenge request the use of prefers-color-scheme, I solved the "save user selected theme" problem by using only LocalStorage.

Any ideas on how I can improve the code (making it shorter, faster, using the best practices...) is welcome. Feel free to comment! :)

Update: Following suggestion, improved how the ThemeSelector class' changeTheme() method works. Instead of going through the elements array twice, it now runs it only once.

Community feedback

@pjooklas

Posted

calculator class makeOperation() i would use switch, not if/else if and why your number1 and 2 are strings, not number type?

in ThemeSelector class changeTheme() method, you use forEach two times, you should make code to iterate only one tie, to add and to remove classes.

Marked as helpful

0

Caio Couto 150

@CaioCouto

Posted

@pjooklas I liked your suggestion on the changeTheme() method. It's something I'm gonna think about on how to implement. Thank you for that! :)

About the makeOperation() method, I decided to go with if/else because I read somewhere that, in matters of performance (and general chaos), the difference is negligible until the number of scenarios are big enough (which I believe is not the case).

Also, number1 and 2 are strings because they're taken straight from the textContent attribute of the button elements. And since they can have more than 1 character (1, 10, 100...), I decided to leave them as strings, which makes it easier to just concatenate more and more digits as the number grows. This way I only have to convert them once: when calculating the result. Otherwise, a new str-float (and vice versa) conversion would be needed every time a new digit is pressed by the user.

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