Design comparison
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 GitHubJoin 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