Calculator app with react

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hiyo,

  Visually it's great and apart from some smaller issues it works very well! The little calculator icon you added to the page tab is very cute. The only thing you could perhaps add to the functionality is to prevent users from adding more than one operator. Right now I could just add two + operators and then it - obviously - threw an error. Other issues are html and css related:

  1. Your buttons should be buttons, not divs.

  2. Your theme switch has a few accessibility issues: instead of a div, your switch should be wrapped in a form and a fieldset. For the "theme" title you could try using legend element.

  3. Adding display: none on your input will entirely remove them from the html and users won't be able to interact with them. You'd want to use opacity: 0 here, so screen readers can still note that they're there.

  4. Your switch is missing aria-label so there are really only visual indicators as to what options there are. In React it's quite easy to conditionally change what's displayed as an aria-label. I'd also suggest using more descriptive theme names, rather than first, second, third (=>light, dark, neon perhaps?).

  5. Don't set a fixed height on your buttons (or on anything else, really). Add padding.

  6. Don't lock the height of your website to a 100vh, use min-height instead.

  7. You could add an align-items: center as well, to center the calculator vertically.

  All in all, it looks great though, you only have some work to do the on the accessibility side of things. Good luck ^^

  Marked as helpful

  2

  ---

  

  Attila•290

  @unexunderscorePosted over 2 years ago

  @FluffyKas Hi there, thank you for your time and feedback.

  0