Design comparison
SolutionDesign
Solution retrospective
click the numbers to switch Theme(;
Community feedback
- @asbhogalPosted over 1 year ago
Hi Salem,
Good work! Calculator functions well and designs match the mockups, great stuff. Just a few points however:
- In terms of UI, it would be good to have interactivity for the theme toggle itself. Took me a while to figure out how to switch the theme (by clicking on the numbers), as this isn't a natural user behavior. If someone was viewing this without seeing the explanation above, they might encounter the same issue.
- Also, it would be good to have the ability to type in numbers using the keyboard as you would for a typical calculator app
- In terms of responsive, your app isn't well designed for mobile devices. The grid for the buttons doesn't adjust depending on the viewport. If you check this in your dev tools, you'll also see it.
- You should also remove or amend the line
grid-column-gap: px
from.btnns
in the@media screen and (max-width: 375px)
as this is an invalid declaration. - Following on from that, you should have clear, understandable class names, so I'd consider changing the above class to something more comprehensible for other devs, e.g.
.buttons
Hope this helps!
Marked as helpful0
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