Submitted almost 2 years ago

[Rock, Paper, Scissors] - React

#accessibility#react

David• 8,000

@DavidMorgade

Preview site View code

This is a solution for...

Rock, Paper, Scissors game

HTML
CSS
JS

4advanced

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, this challenge is by far the most fun I have done from frontendmentor, it was a bit tricky at the start, and got stuck a lot with the layout but I managed to finish it.

This is also my second project using React, in this project I'm using useEffect, useContext, useState, if anyone can check if im using this hooks correctly it would be awesome cause I'm trying to improve my react and this hooks are core.

I did use Context API to store the values of the state and use them in other components, dunno if this is the best approach or ¿Should I use prop chain instead?

For the logic of the game I used a ternary operator with 9 conditions, if anyone knows other way to archive this goal with a better solution, go ahead and teach me!

Thanks everyone and happy front-enting!

Community feedback

Ahmad_Mana• 320

@UserAhmad2001

Posted almost 2 years ago

Hello David

Congrats on completing the rock paper scissors challenge,

I got a small tip for you:

if you want to add the shades to the design, here's how

nest the rock_paper_scissors images inside a container
add below styling to the container:

box-shadow: inset 0 0.3rem 0 2px rgb(64 64 64 / 25%)
                    , 0 0.5rem 0 0px rgb(162 21 47);

border: 1.6rem solid #dc3550; ```

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord