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: here
• Live Site URL: here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Styled Components - For styles
• react-cookie - for storing cookies

What I learned

Learnt a thing or two about updating states in react. Update is done right from the component's position in the parent component. If a Math.random() is attached to a prop of a component, the random number is always run each time the state of that component updates. therefore, there will be different numbers each time even though the file for the update is different from the file that the Math.random function was set in.

Example is as follows:

  ParentComponent = () => {
    return (
      <ChildComponent ran = {Math.random()} />
    )
  }

  ChildComponent = ({ran}) => {
    const [random, setRandom] = useState(false)
    function _setRandom() {
      setRandom(!random)
    } 

    console.log(ran)
    
    return (
      <button onClick={_setRandom}>
    )
  }

Continued development

I still have to develop in areas of smooth responsiveness and caching images for offline use.

Useful resources

• Adding your own origin - git - This helped me know how to go about removing the Frontend Mentor repo and adding mine. I will use it going forward for any cloned repo.
• Styled components documentation - I'll keep on learning this concept. It is very cool for styling components and extending styles for other components. makes writing CSS more traditional, away from the JavaScript style JSX presents.

Author

• Website - Ajiboye Mayokun
• Frontend Mentor - @phynormynal
• Twitter - @AjibsonMayokunA

Special Thanks to Frontend Mentor for the wonderful and tasking designs that are given as challenges. I hope to keep on working hard and bring the best out of myself with Frontend mentor leading the way.