Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rock paper scissors lizard spock using React

P

@MarkoNikolajevic

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


I think that react code could be improved...any hints and suggestions are appreciated

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Marko, awesome work on this challenge. Your React code looks absolutely fine. I would only make small changes, such as:

  • Instead of using element.style.display = 'none' in various places I would use a logical operator to conditional render the component or not. This would mean the RulesModal in your App.js would become { rules && <RulesModal setRules={setRules} />}. You'd then be calling setRules(false) to close it in the model component.
  • I'd also recommend breaking up your code into smaller components. For example, instead of having 5 button elements repeated in the Game.js you'd have 5 calls to a component that would render a button and change the props based on what's passed down.

These are small things though. Overall, you've done a really good job. How are you liking React so far?

2

P

@MarkoNikolajevic

Posted

@mattstuddert thank you for the feedbacks! I will improve it as you suggested. I love React, just still struggling with states and hooks

0
siddtheone 490

@siddtheone

Posted

Very nice, however at resolution ~800px, there is white background with purple background

0

Please log in to post a comment

Log in with GitHub
Discord logo

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