Rock, Paper, Scissors - CSS & JS

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted about 2 years ago

  Good job on this one. The game plays just as it should.

  There are a couple of warnings in the HTML validation and accessibility reports you should take a look at.

  For example, one of the warnings tells you your <section> tags are missing an h2 tag. All <section> tags should have one of these because it helps screen readers know what the section is about.

  If you don't want a title to appear or interfere with the layout, you can add an h2 tag and give it a class like for-screen-reader then add a meaningful title for that section.

  Next, style it such that it's not visible to people with good eyesight, however, screen readers will still read it out to those with poor vision for better context.

  .for-screen-readers
  {
       position: absolute;
       right: -1000000px; // give it a very large number so it's not visible
       height: 1px;
       width: 1px; // if it ever ends up on the screen, it's too small to be seen
       overflow: none;
  }
  

  To add those expanding circles to the winner, you could wrap their choice in div and give it multiple box shadows.

  div.winner 
  {
       box-shadow: 5px 5px white, 10px 10px grey, 15px 15px dark-grey; 
       border-radius: 50%;
  }
  

  Hope this helps.

  Good luck with your other solutions.

  Marked as helpful

  0

  ---

  

  Goran•500

  @GoranK89Posted about 2 years ago

  @Victor-Nyagudi Thank you for the advice and the expanding circles tip!

  0