Frontend Mentor - Rock, Paper, Scissors, Lizard, Spock solution

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

Links

• Solution URL: https://www.frontendmentor.io/solutions/rock-paper-scissors-lizard-spock-game-challenge-sjA0CaEUq
• Live Site URL: https://gabrielfmpinheiro.github.io/Rock-Paper-Scissors-Lizard-Spock-Game-Challenge/

My process

Built with

• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Styled Components - For styles
• Tailwind - For styles

What I learned

• How to use the react hooks, mainly useState, useEffect and useContext
• More knowledge of positioning elements

Useful resources

• Hooks React Doc - This helped me understand more about hooks
• Grid Course - This is a playlist which helped me to remember some grid concepts
• React Website Using Styled Components - This video helped me with some styled component concepts
• Twin Macro This library helped me to use styled components and tailwind together

Author

• Linkedin- Gabriel Pinheiro
• Frontend Mentor - @GabrielFMPinheiro
• Codewars - @GabrielFMPinheiro