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 - HTML + CSS + JS, tried to focus on accessibility

@AgataLiberska

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


Please try it out and if there's any errors please let me know so I can fix them. Copied most of the behaviour (when it comes to input, display and navigation) from Windows system calculator. I tried to make it accessible so keyboard navigation can be used (numbers + operators or use arrows to navigate keypad). Color themes can be switched with keyboard too. However! I found out that NVDA screen reader hijacks arrow keys however so things don't work as they planned, and overriding that seems counter productive. I also checked with Thunder and while the navigation works fine, it doesn't read out much - but I've only just installed it so haven't had much time to get used to how it operates. Lots more to learn I guess :)

Community feedback

P
tediko 6,580

@tediko

Posted

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

@AgataLiberska

Posted

@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,580

@tediko

Posted

@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

@pikapikamart

Posted

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

@AgataLiberska

Posted

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

0
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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

@AgataLiberska

Posted

@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

@brasspetals

Posted

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

@AgataLiberska

Posted

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

1
ellienndea 130

@ellienndea

Posted

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

@AgataLiberska

Posted

@ellienndea thank you so much! :)

0

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