Skip to content
Submitted over 4 years ago

ROCK PAPER SCISSORS [DOM manipulation, SCSS, RWD, HTML]

Jonh Alexis•555
@LaplaceXD
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Rock, Paper, Scissors game
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

I did the optional challenges, so if you wanna switch game modes go to settings.

Questions: For JavaScript:

  • How good or bad is my code, I tried using OOP principles, but somehow it feels like my code is going for functional programming.
  • Should I have split my codebase to multiple files for readability (by using export and imports)?

For SCSS:

  • Not gonna lie, this was the hardest part, and it really just looks messy in my eyes, any suggestions to improve readability, and structure of my SCSS??
  • Should I have used more mixins and functions to make my code more modular?

For HTML:

  • Just give any suggestions for this one, I don't have any questions I can think of for this one.

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    You've done an amazing job on this project, Jonh! Your solution looks and functions really well and I love the extra details you've added in the settings modal.

    Your JS looks good, although I agree that you've used more of a functional approach as opposed to OOP. You could have had a Game.js and Player.js file with classes and methods to help control the flow. But having a single file is not a bad approach as it's not too much code. Watch out for areas where you're repeating your code and just changing a few values. These parts are always perfect candidates for refactoring to DRY up your code.

    Your SCSS looks fine. There is some repetition in there, so mixins would work well in those situations. Mixins and functions are a great feature of Sass, so I'd definitely try to use them wherever possible to make your code more reusable. I'd also recommend looking into the 7:1 Pattern for structuring your files. It's a great architecture and helps keep your code more modular.

    As for your HTML, it looks good! You're using button elements to trigger the actions, which is great. One thing I would say is that you're only using h1 elements for your headings. Although this is valid HTML it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. Instead, I'd recommend sticking to a single h1.

    I hope that helps. Let me know if you have any other questions! 👍

    1
    Jonh Alexis•555
    @LaplaceXDPosted over 4 years ago

    @mattstuddert Thank you for your wonderful response, Matt, I haven't heard about the 7:1 Pattern, so I'm gonna look into that.

    Is it also advisable to use %placeholders and extending from those, so styles are more reusable for SASS?

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    @LaplaceXD yeah, placeholders are preferable to mixins as they tend to lead to less generated CSS code. But mixins are great if you need to pass in dynamic values.

    1

Please log in to post a comment

Log in with GitHub

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