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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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: Github
• Live Site URL: rock-paper-scissors-game

My process

Built with

• Flexbox
• CSS Grid
• Desktop-first workflow
• React - JS library
• React Router - For navigation
• Framer Motion - For animations

What I learned

I have learnt how to use framer motion to build cool animations in react app.The framer motion library makes it very easy to uild complex animations planning to use it in other projects.

setting height: 100vh does not work for mobile browsers, scrool bar appears. To avoid this I had to use javascript to set the height of the App in useEffect hook.

useEffect(() => {
  const App = document.getElementById('App')
  App.style.height = +window.innerHeight + 'px'
}, [])

I have learnt how to modularize code and make reuseable components

Useful resources

• Framer motion youtube tutorial - This helped me learn framer motion. The instructor, laith harb explains the concepts very well.

My Notes

• should have made components like rock, paper.. etc and re-use them where ever needed.