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-Lizard-Spock | Vanilla JS, SCSS

m1mmseen 460

@m1mmseen

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 started this project from scratch and with the desire of writing Vanilla JS, so I had to structure everything. For the game itself I created a gameServices Module which hold the two function "startGameService" and "playAgainService". These services are calling gameHelper functions. The main.js therefor only contains the Event listener. This approach was satisfying, because the code became more generic and maintainable. I also encapsulated the rules board logic and the game field switcher in a separate modul, whereas the game switcher is only accessible from the gameHelper and the rules board access is located in the html as second script beneath the main.js. I find the code to be very clear and structured.

For UX reasons I added some extra animations and transitions to the interactive elements and the winner display.

After I've reached the definition of done, I cared about the refactoring of the code. The guideline here was to eliminate duplicated code snippets especially in the scss files.

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