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

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 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! 💪

  3

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @tediko ah you're absolutely right, I'll correct it! And as for extra functionalities, I'll take a little break from this challenge now but definitely will look into adding this, sounds like a nice challenge :)

  1

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @AgataLiberska I've done this solution recently too and to be honest there's always something that you could add so don't feel like you have to, it was just an idea! ;)

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 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 ^^^

  3

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @pikamart oh I did not think of that, thank you so much, going to correct it now!

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 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)! 😁

  1

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @ApplePieGiraffe haha I thought it would be really weird if you we're just happily clicking away and suddenly got a modal which doesn't help you all that much when you click 7!

  Thanks a lot for taking the time to check it out and comment!

  1
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 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!

  1

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @brasspetals thank you! I really appreciate that you took the time to check it out!

  1
• 

  ellienndea•130

  @ellienndeaPosted over 3 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

  0

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @ellienndea thank you so much! :)

  0