Rock, Paper, Scissors game

Community feedback

• 

  Grego•1,310

  @Grego14Posted 5 months ago

  👋 Hello! 🎉 Congratulations on completing the challenge! 🎉

  Use ids to get the elements in the JavaScript code.

  To avoid using a lot of eventListeners you can use 👉 Event Delegation and this would optimize the code and make it more readable.

  Use semantic html tags, you're using a div element for the rulers button when you could use a button element and that causes that users are not be able to focus on the element using the keyboard.

  add the tabindex='0' attribute to all the choice--icon so that you can focus an option using the keyboard and add a keydown event for select an option using keys like Enter or Space.

  To avoid repeating the code in the eventListener of the closeRuleBtn and the rulesBtn you can do something like this:

  function handleButtons(){ 
    rulesOverlay.classList.toggle('hidden')
    bodyOverlay.classList.toggle('hidden') 
  } 
  

  The classList interface toggle method removes or adds the class depending on whether it contains it or not.

  I hope this helps! 😁

  Marked as helpful

  0

  ---

  

  Shiv Pratap•230

  @shivPostedPosted 5 months ago

  Thanks, @Grego14 for your valuable insights I will make these changes in my code and that toggle one will help a lot, I first used a button for rules but replaced it with div because it was easy to style, but sure I neglected the accessibility of the user, thanks again for pointing that out, I will think about that keyboard event you mentioned

  1