Raymart Pamplona• 16,140
@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 thebody
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 haveheight: 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 withmin-height: 100vh
. This takes whole viewport's height and will expand if it needs to. - The
.wrapper
selector havewidth: 100vw
which creates a horizontal scrollbar, you can remove that sincediv
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 aboutaria-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 usebutton
element as well. - Resizing to mobile state, a horizontal scrollbar also appears. This is because your
.hands
selector havewidth: 29.75rem;
styling on it. I suggest removing that and replace it withmax-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