Design comparison
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
- @pjooklasPosted over 1 year ago
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 helpful0@CaioCoutoPosted over 1 year ago@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
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