Submitted about 3 years ago

Calculator app | CSS grid & custom props, color scheme media query

Omar M• 110

@omonteon

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Calculator app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi there !

Thanks for watching my solution for the calculator app challenge. This is my first submission. With this challenge I used for the first time:

CSS grid
CSS custom properties
Color scheme media query

All feedback is appreciated :D

Community feedback

Grace• 29,310

@grace-snow

Posted about 3 years ago

I like this, well done. Functionally on mobile all seems to work well

The only thing I would change is how you are labelling the theme switcher

you have the numbers in html anyway that should act as labels. You could prefix the numbers with the word "theme" in a Sr-only span if you wanted to make that labelling more explicit
empty label elements should never exist in html. If their purpose is for styling, use a meaningless element
the other reason why I recommend using Sr-only or any text in html for labelling is because aria-label is not translatable, whereas other text in the html is

I hope this info is helpful

Marked as helpful

Omar M• 110

@omonteon

Posted about 3 years ago

@grace-snow Thank you for your feedback Grace !

I'm still a beginner with accessibility related stuff, so your detailed feedback about the theme switcher is very useful. I'll definitely work on the corrections you suggested.

EDIT:

Replaced empty labels with span elements.
Replaced span elements(theme numbers) with labels.
Investigated how to use sr-only for the theme switcher. While it is a good option, I think I won't be that explicit, I downloaded NVDA for windows and the screen reader reads "Theme #X radio button checked X of 3", when I click on the X theme.

rndm-hlgi• 30

@rndm-hlgi

Posted about 3 years ago

The front end of the app looks pretty good. Nice job overall

However I did notice a weird behavior with the ( . ) and 0 button. After doing some calculation and pressing =, when pressing both the ( . ) and ( = ), the calculation is repeated

for example 2 + 2 = 4 when pressing =, the addition is repeated with the result of the first addition 4 + 2 = 6 however the . button or 0 for some reason does the same thing

I'm not sure if this is by design or a bug, but it does seem odd as I would expect the calculator to reset after pressing either of those two

Marked as helpful

Omar M• 110

@omonteon

Posted about 3 years ago

@rndm-hlgi You're right ! That's unexpected behavior. I agree that a reset should happen in those cases. I'll submit the fix.

Thank you for your feedback !

EDIT: The reported issue should be fixed.

Please log in to post a comment

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