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

created rock pair scissors game using html, css and javascript

@b-l-u-e

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


requesting for feedback thanks

Community feedback

@pikapikamart

Posted

Hey, great work on this one. The game works properly. The layout in desktop is good as well as for the mobile.

Some suggestions would be:

  • Viewing in dev tools at the bottom, the website can't be scrolled since you used overflow: hidden on the body tag. I suggest removing it. But removing it, it will create a white empty space on the bottom part right, that is because the .wrapper selector only have height: 100vh. I recommend to not use this styling since it will only limit the element's height, base on the viewport/screen's height. Instead, remove that and replace it with min-height: 100vh. This takes whole viewport's height and will expand if it needs to.
  • The .wrapper selector have width: 100vw which creates a horizontal scrollbar, you can remove that since div element or block elements takes 100% of the screen by default.
  • The selections, those choices could be wrap inside a button element, so that your game could be play using keyboard. Right now, you won't be able to tab on those like it should be.
  • I think you forgot to add the rules section of the game, it should be on the bottom right part with a modal.
  • I suggest using an aria-live element so that you could inform screen reader user whether that player won or lose. You can search about aria-live, adding this would be really good for them. Also, I didn't implement this before when I tackled it, since my knowledge about it before is limited, that is why I can only give suggestion, but not provide my solution to it hehe :>
  • The play again button should use button element as well.
  • Resizing to mobile state, a horizontal scrollbar also appears. This is because your .hands selector have width: 29.75rem; styling on it. I suggest removing that and replace it with max-width: 29.75rem. This way, it will limit the .hands width and it won't overlap the parent container, thus avoiding the horizontal scrollbar.

I haven't check your javascript, but it works it works right. ( It's a bad saying :>).

Still, good job on this one.

Marked as helpful

1

@b-l-u-e

Posted

wow thank you so much for taking your time to review my code will definetly make some changes i have learnt alot from you

0

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