Calculator

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is bit smaller and not centered right now but it's fine I guess. It is responsive though the mobile layout could make the buttons to occupy more width since right now, they are small.

  Also, I didn't get the bug like what you said with using 2 clicks, everything seems working fine, but there is an error in the console, you might want to fix that since if you open up dev tools, then refresh the page, you won't get it to reload since the debugger will fire because of the bug.

  Some other suggestions on the site would be:

  • Do not directly type the wordings as uppercase on the markup, if you do this, screen-reader will read the text letter-by-letter and not by the wordings. Use only the lowercase version to write in the markup and instead use text-transform: uppercase on it.
  • Also you don't need br on the h1 tag, you just need to first use a word-break: break-all property on it, then use margin: 0 auto to center it and finally use a max-width on it, adjust until you get the desired look. But remember to remove the br.
  • Each text above the input should be the label for the input itself and not a heading tag.
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • Also on the input don't add a default value attribute, those are supposed placeholders and not value. By using value users will be confused on why there is already a value added.
  • Since you are using button on this, it would be really great to add a aria-live element that will announce a certain button has been selected. Since button itself is not informative enough you will need this to further inform a user the selection. You might want to search for aria-live if you were to implement this.
  • Make the visual indicator for the button more visible. Right now, using tab key on those, it is hard to tell where I am at right now so better tweaking the :focus-visible state of the button.
  • The custom-input needs to have an associated screen-reader label to it or an aria-label. The value for whatever method you pick will describe what does the input needs.
  • Adding a cursor: pointer to the desktop version for each button just to make it more natural.
  • Try to limit the output value for decimal place so that the text won't overlap the container if the result value has many decimal digits.
  • Lastly, another idea is to have a aria-live element that announces the calculator has reset if the reset-button has been pressed.

  Aside from those, great job on this again.

  Marked as helpful

  1

  ---

  

  CoderPr0•645

  @CoderPr0Posted about 3 years ago

  @pikamart Thx allot for all the tips, it's of great help. I will look into all of this and make fixes.

  1