Hi, this is my solution for this challenge. š»
āļø Features:
Suggestions and feedback are welcome! š
Hey @FireFrozen, nice work! I love the script for keeping the score between refreshes! š„
I've been learning a lot lately about accessibility (Global Accessibility Awareness Day is coming up in May!). I wonder if you could refactor this so that the game is keyboard accessible. Unfortunately, if I was someone who couldn't or preferred not to use a mouse for some reason (I'm thinking of people with fine motor issues like Parkinson's or severe arthritis, or with disabled arms/hands, etc), I can't seem to navigate to the rock, paper, scissors options! ā¹ļø
Right now, if I try to tab or navigate to the game with only the keyboard, I can only get to the Rules button and the attribution links. I bet if the rock/paper/scissors were buttons instead, then someone who is using their keyboard would be able to participate! š„³
Inside the Rules modal, there's also tons of improvements that could be made so that the modal is also WCAG compliant. The Deque example is pretty good, fairly simple, and shows that in order to be accessible, a modal has to have particular keyboard functionality (like the trapped focus), has some other semantic features, and more. Here's another good page to learn about some basic accessible modals.
Well done!
Nice work on this! Looks like there's some SVG's missing in comparison to the design, but I love how clean & concise your JS is!!
One thing I've been trying to get better at is starting from the mobile designs instead of the desktop. If you build out the mobile version first, and use min-width media queries instead of max-width, you won't run into issues where your styles stop. Based on your current media queries, once a screen gets past 1440px, your site styles totally disappear! š In dev tools, expand the screen size past your max-width 1440px, and you'll see the component looks broken (it's not, but it may look that way to a user).
Nice work! Personally, I like to have my mobile styles kick in WAY later. At least for me, your mobile styles display as soon as my screen gets at 1440px, which obviously isn't really "mobile." I think I had mine change to the mobile designs at like 768px, roughly iPad/tablet size.
There's also some funky image distortion in p.eth & p.time when the screen gets pretty tiny (~370px). Not sure if this is super relevant at that size though.
Well done!!
I find it difficult without design files to make it accurate.
Do I overwrite code in this project?
The very first thing I do is copy all of the style guide information into my html or css or whatever file I'm working in. That would probably answer a lot of your questions about the design. The fonts and weights are all detailed in the style guide, so those would have been a nice addition to what you built right away.
Then, I drop the design files into Figma. I use some of the Figma tools to measure things like padding or border radius, even sometimes get colors (even though again, those are all in the style guide). It's not nearly as nice as having the actual design file, but I work around it.
Hello ladies and gentlemen! This one was rather fun. Lots of 'left a bit right a bit' with the background images. Thought I'd add some animations/transitions in there, too. Leave a like if you like!
Nice work! I'm really new at javascript so I have a couple questions for you.
I was having a really hard time figuring out where that carrot animation needed to be to get triggered correctly. I see you used ::after for your orange carrots. Did that transform get triggered then because of the eventListener is on your .active class (which got added after the click)?
Also, I didn't even get to the transitions to display the answers (your fade-1/2/3). If those divs with the class of the fades are all closed, how is that transition getting applied to your accordion items?
Again, great work! Just trying to understand. Thanks for actually giving me some help (indirectly!) :)
This is my 3rd challenge solutions, any problem or feedbacks or any improvement that I should make with CSS, HTML or Design? your feedbacks and comment really appreciated! Thank you :D
Nice work!
Design: what I would do is give breathing room to the attributions they gave at the bottom. There is 0 padding and 0 margin around that right now, and it's very constricting, clumped up next to the main container. Also, I started just adding subtle hovers. They gave us the active states, so a subtle transition just makes it easier on the user instead of the instantaneous flash we can get sometimes.
