Calculator App - HTML + CSS + JS, tried to focus on accessibility

Community feedback

• 

  tediko•6,700

  @tediko

  Posted almost 4 years ago

  Hello, Agata! 👋

  Congrats on finishing another challenge! 🎉 Your solution looks very good and also responds well. I really like the idea with tutorial displaying in modal. Hover effect on keys when user input from directly from keyboard is also a nice touch! Here's my few tips:

  • After division by zero error pop up your calculator doesn't reset and I can to this error add next value - for example: 100 / 0 = not allowed, and then I click + 10 and it display NaN+10. It should either reset or take 0 as a "previous value".
  • One additional function that you can add is to perform last operation again. For example 2+2=4 and another click on equal button will be 6 since result our previous equation was 4 and our last input was 2 so 4+2=6.

  Good luck with that, have fun coding! 💪

  32
• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, really great work on this one. Layout is really good and those custom key navigation is really awesome.

  Just a heads up, when a user press arrow keys, since pressing up and down scrolls the layout right and maybe a user wants to scroll down, they'll just press arrow keys. But since for every press, you are calling the moveFocus function, so if a user is not in focus inside the calculator buttons, it passes an undefined value from the findFocusedIndex since there are no node elements that have the focus, thus prompting many error for every arrow click a user made which you can see in the console.

  So a quick fix, on your handlekeys.js module, inside the handlekeys function, wrapped the switch statement inside an if statement, checking if the currentIndex variable have a valid data.

    if (currentIndex != undefined) { 
      the switch statement goes inside 
     }
  

  You still need to check if it is undefined because if (currentIndex) is the only passed condition, it won't read index 0 since 0 is false.

  Aside from that, really really great job on this ^^^

  31
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted almost 4 years ago

  Hello, Agata Liberska! 👋

  Wonderful job on this challenge! 👏 I'm afraid I don't have much to suggest, either, but I think you've done some really nice work! 😀 I was actually looking around for the instruction modal that I read about in the others' feedback and then found it, of course, when using the keyboard to navigate the page! 😅 It's so nice that you've really thought about keyboard functionality for this challenge and the calculator's working pretty well! 👍

  Looking forward to your next solution! 😉

  And as always, keep coding (and happy coding, too)! 😁

  11
• 

  Anna Leigh•5,135

  @brasspetals

  Posted almost 4 years ago

  Hi, Agata! Awesome job on this one! 🙌

  You've already gotten some really helpful feedback, and I don't think I have much to add but more praise. The instruction modal was a neat idea, and I had fun playing around with the keyboard controls. Everything seemed to work great for me! 👍

  Looking forward to your next solution - happy coding!

  11
• 

  ellienndea•130

  @ellienndea

  Posted almost 4 years ago

  Hi Agata, this calculator app is really great. On my laptop it works perfectly fine with mouse and keyboard. :) I really like your focus on accessibility, it's so important! Happy coding 😊 Linda

  01