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

• Frontend Mentor - Rock, Paper, Scissors solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • 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

Main page

Selected option

Rules

Links

• Solution URL: https://github.com/evertzner/rock-paper-scissors
• Live Site URL: https://lustrous-entremet-cdfc14.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• SCSS
• Flexbox
• CSS Grid
• React - JS library
• Redux Toolkit - Redux

What I learned

I use this project to have a big focus on react, redux and improving designing technics.

Partial SCSS to have organized styling in modules.

Continued development

I want to get more in deep into Redux as it is a powerful tool to manage data into an application.

Useful resources

• Zero To Mastery - Udemy course 'Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL)' from 'Zero to Mastery'
• Maximilian Schwarzmüller - Udemy course 'React - The Complete Guide (incl Hooks, React Router, Redux)' from 'Maximilian Schwarzmüller'
• Kevin Powell - Amazing YouTube channel to learn all about CSS.
• Web Dev Simplified - Awesome YouTube channel to learn everything about web development.

Author

• GitHub - evertzner
• Frontend Mentor - @evertzner