calculator app with custom themes using a scss mixin

Solution retrospective
If you notice anything I can do better in the future, feel very free to let me know.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @JustShuaib
Hi there, I noticed I can't switch from theme three to theme two in your application. You should try to work on it. Also, if I divide a number by zero, the result is infinity. If I want to perform another operation after that, it adds infinity to whatever I type in. Same thing if I divide zero by zero. Also,If I have a result greater than 15 characters, it enlarges the screen. Was that intentional or a mistake?
Going through your CSS too,you should make it one selector per line. For example, you have this.
body[data-theme=theme-1] .calculator main #button-delete, body[data-theme=theme-1] .calculator main #button-reset, body[data-theme=theme-1] .calculator main #button-calculate {
Add line break after each comma.
You had quite complicated selectors too, for example
body[data-theme=theme-2] .calculator header .theme-switch-container .theme-switch-labels .theme-switch-label {
Chances are having complicated selectors like this is bad practice, try to keep it flat. This is a very nice solution regardless.
Happy coding! 😊✌️
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