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

Astro, WCAG Accessibility, CSS Animations & Vanilla JavaScript

#accessibility#astro#bem#sass/scss#animation

@markteekman

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used fixed widths and heights to achieve the buttons on the pentagon background. I was thinking about using CSS Grid, but didn't know how to get it right. I'm curious about how other solutions tackled it and I might try it out if there's a better way.

Community feedback

Suleman 750

@legion40216

Posted

Well done bro, love the use of the scale animation and the opacity transitions it bring it to life, could u explain the animation you used in this app i would like to try some of the myself :)

1

@markteekman

Posted

Thanks @legion40216! 😃 I'm happy to explain, here's how I did this:

I'm setting the initial CSS properties of what will be added inside these div's:

<div class="player__choice"></div>
<div class="computer__choice"></div>

To this:

[class*="__choice"] > * {
  opacity: 0;
  transform: scale(2);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

And whenever the user initiates a game I use the following JavaScript to change the CSS properties, including a setTimeout function to add the delay in animations:

setTimeout(() => { 
  playerChoiceDisplay.firstElementChild.style.opacity = '1' 
  playerChoiceDisplay.firstElementChild.style.transform = 'scale(1)' 
}, 500)
setTimeout(() => { 
  computerChoiceDisplay.firstElementChild.style.opacity = '1'
  computerChoiceDisplay.firstElementChild.style.transform = 'scale(1)'
}, 1000)

Hope this helps 🙂

PS: I really like your take on it by adding that "Best of three" at the top!

2
Suleman 750

@legion40216

Posted

Kudos bro thank you for the help, keep up the impressive work.

0
Noha M. 415

@NohaFahmi

Posted

Hi, Mark I Loved your solution! It is really great work, keep going!

1

@markteekman

Posted

Thanks @NohaaAa! 😊

0

@Haripriya2004

Posted

As a beginner, I loved this but idk why its not fit into my lap screen or the style itself.. I need scroll a little to see reset button!

1

@markteekman

Posted

@Haripriya2004 thanks for taking a look at my solution! 😊 What are your viewport dimensions if I may ask? It does need some scrolling if the height of your screen becomes smaller, but maybe there's an other bug at play here 🤔

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