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, Scissor Game, basic & bonus with React and Tailwind

@Efobi-Francis

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


This project was really challenging, at first I used useParams to get the string associated with the particular button the user clicked, then later i felt i could do better not to expose the string in the URL so i continued research and i decided to implement it with useContext and createContext react components. i did same thing with the score, so i could expose the score using a custom useScore hook to share the score amongst components.

my final challenge was handling the browser refresh/reload when the game is reloaded and handling the error page when the reload happens because I'm using useNavigate to route between components on the page. i also tried using a wildcard ('*') to the error page, but it wasn't working.

for the score, i used the localStorage method to cache the score locally.

please I'll appreciate every feedback and how i could fix the browser reload

Community feedback

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