Simple functioning calculator

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  Nice solution! You've matched your solution to the design really well. Nice work! 👍

  As you mentioned, the calculator is working pretty well. But there are a few bugs in there. I'd recommend playing around with it some more and try ironing out those issues.

  Also, I'd recommend reviewing the toggle. I'd expect to be able to click on 1, 2, or 3 and have it switch to the correct theme. But at the moment, it cycles between each one regardless of the option I choose. You could look into using radio inputs instead of a single button. The button is also causing a HTML validation error at the moment because you're nesting a div inside it, which isn't valid HTML.

  One final thing: all of your calculator buttons are currently div elements with event listeners on them. Avoid setting click listeners on non-interactive elements, like the div element. These can't be accessed by anyone not using a mouse/trackpad to navigate the content, which is a bad practice. Instead, add click listeners to interactive elements like a or button. This will ensure the element is focusable and accessible by people not using a mouse/trackpad.

  I hope this helps! Keep up the great work! 🙂

  1

  ---

  

  OK169•605

  @olgak169Posted over 3 years ago

  @mattstuddert Thanks for your feedback! All great suggestions, will definitely improve my solution with your help!

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, OK169! 👋

  Congrats on finishing another challenge! Your solution works well! In addition to Matt great feedback - maybe add some :active pseudo-class for your buttons to create "clicking" effect. Also, it would be nicer if you add transitions to this theme change. Also, from pure curiosity why do you add overflow-x: scroll; to your .display?

  Good luck with that, have fun coding! 💪

  0

  ---

  

  OK169•605

  @olgak169Posted over 3 years ago

  @tediko Hello! Good idea for the clicking effect! I didn't add much animation to the project because the design seemed quite minimal and when I tried to add hover effect it just didn't seem right. Some clicking effect however might look good. I added overflow-x because I didn't like how large numbers were displayed. Not the most elegant solution, but I couldn't think of anything better at the time.) Thank you for your feedback!

  0