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

Advanced Rock Paper Scissors project made with Angular v.17 and SCSS

@dev-jLagunas

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 was such a great project to practice Angular. I was able to make use of the Angular router, Angular v.17 control flow, RxJS Observables, Angular services. Furthermore, as I have more confidence and experience with the best practices of HTML and SCSS, I paid great attention to how each HTML template and CSS file was written.

I was not able to add the radial gradient to the winning SVG. I believe this was because working with SVG and using the background property on them causes conflicts. I feel as though this could have been solved with HTML and wrapping the imgs/svgs in a div tag.

Nonetheless, I worked my hardest to follow the challenge design and features. In the end, this is a fully functioning game. I think I could have improved upon this by using local storage to hold the score.

I am excited to do more of these Advanced challenges while also doing the simpler ones in between.

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