Skip to content

ozzy1136/rock-paper-scissors

Repository files navigation

Frontend Mentor - Rock, Paper, Scissors solution

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the game depending on their device's screen size
  • Play Rock, Paper, Scissors against the computer
  • Maintain the state of the score after refreshing the browser (optional)
  • Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)

Screenshot

Screenshot of the live site

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • CSS animations
  • Mobile-first workflow
  • React - JS library

What I learned

Continued development

I hope to have more projects that integrate CSS animations, because, although they are somewhat difficult to manage without an animation library, they can be great for user experience. I definitely have to seek out more resources and guides to better manage keyframes and I probably should pick up GSAP.

Aria attributes are another area that I need to continue to learn about. Especially on a project like this one, where there is a lot of updating content, it is important that low vision and blind users are able to get the information as it changes. I included an aria-live attribute on elements that have updating text content, but they don't seem to be announced every time. I wil continue to learn about this attribute and if there are any quirks when using aria attributes with React.

Author