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

Calculator app (with SASS)

@ManuelSeitz

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


This was my first time using SASS, feel free to comment.

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Hi Manuel Seitz

I have just checked you calculator solution, here is some few things that you may consider:

  • the theme section , in my opinion should best be handled using radio buttons. Radio buttons allow one selection to be choosen from a a group of related options. I see in your solution you have used a datalist and input range , the issue with that is on accessibility concerns. I think that will be a source of confusion as the message presented to them (of a slider. Remember some people rely on screen readers) will not be the expectation. Try using a keyboard to navigate the site, check that the display will present undefined the moment you press the tab key. That means that a person relying on a keyboard only will not be able to use the calculator.
  • the body does not need any restrictions in terms of the width. The following declarations on the body element should be removed min-width: 363px; . The only recommended setting on the body in terms of size is min-height: 100vh
  • make sure the calculator can only allow a single decimal point in a number, avoid the situations where I can enter a number such as 98....9
  • when entering the operators, I suggest also to see that an operator should not be followed by another operator. At least the current pressed operator should override the previous one in such cases. For example the following 35+-+- should not be happening.
  • do the following calculation 0.1 + 0.2
1

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