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 Game

@Damilordz

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


What are you most proud of, and what would you do differently next time?

What I am most proud of: I am most proud of successfully integrating Tailwind CSS into my project. This was my first time using Tailwind, and I managed to create a visually appealing and responsive Rock-Paper-Scissors game. Additionally, I’m proud of the interactive elements and the smooth user experience achieved through React's state management.

What I would do differently next time: Next time, I would focus more on the optimisation of the game logic and perhaps introduce more features such as animations or sounds to enhance the user experience. I would also like to explore using custom hooks in React to make my code more modular and reusable.

What challenges did you encounter, and how did you overcome them?

Challenges:

  • Learning Tailwind CSS: Since this was my first time using Tailwind, I found it challenging to get used to its utility-first approach.

  • State Management: Managing the state for user choice, computer choice, and the game result in React required a good understanding of React's state and lifecycle.

  • Responsive Design: Ensuring that the game looks good on all screen sizes was a bit tricky, especially with the positioning of elements.

How I overcame them:

  • Learning Tailwind CSS: I overcame this by going through Tailwind's official documentation and looking at various examples. I also practiced by creating small components before integrating them into the main project.
  • State Management: I broke down the problem into smaller parts and used React's useState hook to manage each piece of state. I also referred to React's documentation and various online tutorials to better understand state management.
  • Responsive Design: I used Tailwind's responsive utilities extensively and tested the game on different screen sizes. I also used CSS Grid and Flexbox for better control over the layout.

What specific areas of your project would you like help with?

  • I would love feedback on how I can further optimise my code, particularly the game logic and state management. _ While I have a basic understanding of Tailwind, I would appreciate any tips or advanced techniques that can help improve my styling workflow.

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