Responsive Rock, Paper, Scissors Game against Computer

Solution retrospective
I'm proud that at the beginning of the project, I estimated the total time it would take, and I actually finished faster than I expected. I also created a summary before starting, outlining the technologies required and the steps needed to complete the project. Additionally, I managed to store the score in localStorage (one of the bonus points).
For next time, I’d like to take a moment to pause and better understand the concepts I don’t fully grasp. For example, I copied and pasted the structure of async functions, but I’m still not fully understanding how they work. I’d also like to explore interactive animations to implement in future projects.
What challenges did you encounter, and how did you overcome them?I encountered two main challenges. First, figuring out how to make the computer choose an option—I didn’t know how to do it at first. I googled it a bit but wasn’t fully understanding the code, so I asked AI to break it down in simple terms and explain it to me. That helped me fully understand the concept and write the code on my own, knowing exactly what I was doing.
The second challenge was validating the user’s choice against the computer’s. I initially ended up repeating myself with a lot of if... else if statements. Later, with the help of AI, I optimized it using a simple object, which helped me grasp the concept and implement it further into the project. However, I eventually removed it because I had already implemented another solution using CSS that made things simpler.
What specific areas of your project would you like help with?What’s the best way to approach the modal used in the "Rules" button? Is there a better way to implement it?
Also, regarding the "Play Again" button—am I implementing it in the best way?
I'm going to take a deeper look at async functions. However, am I using them correctly, or is there a better alternative? I'm not sure if using them just for the setTimeout() method is the right approach.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kim-fransson
Hi! Great work completing the challenge! Here are some notes regarding the modal:
Modal
- Every rule you need to follow for best practices for implementing an accessible Dialog(Modal) component, you can read on w3.org
- Note writing fully accessible custom modals from scratch is not an easy task and will be error prone.
- But the easiest approach would be to use the
<dialog />
to implement the modal, then you will get some free accessibility. You can read more about it on mdn. - Here are some good tutorials kevin powell and web dev simplified
All the best,
// Kim
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