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: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Flexbox
• lodash - JS library
• React - JS library

What I learned

• React context -React reducers -lodash functions -more in hands

Continued development

I am planning to add some transition effects while updating the phases.

Useful resources

• Lodash -I used this to cut the elements array in to three smaller arrays 2 of length 2, 1 of length 1, I rendered each array as a row in the App component, I did this to get stylish arrangement of the elements using flexbox in each of the rows.

Author

• Website - Muhammad Zahir Hur
• Frontend Mentor - Muhammad Hur
• Facebook - Muhammad Zahir

Acknowledgments

Shamaeel Ahmed

He was the One by whom I got inspired and decided to complete this challenge. On my way completing the challenge he help me in every moment. I talked to him about he solutions of the problems I got, he provided he his support in a sympathetic and encouraging manner. Thanking you a lot Shamaeel. Shamaeel Ahmed