Submitted 11 months ago

Rock paper scissors lizard spock game no frameworks

tomahawk-jupiter•150

@tomahawk-jupiter

Preview site View code

This is a solution for...Rock, Paper, Scissors game

HTML
CSS
JS

4advanced

Design comparison

SolutionDesign

Community feedback

paldong-creater•170
@paldong-createrPosted 11 months ago
Thanks for the reply. "I use javascript to create and append the html to a div". I understand the animation part and how you created the circle, circlesContainer using javaScript but I did not understand how you brought rippleContainer in the html and spcially ripple.html into index.html Can you please explain your approch with simple example. I am in awe like you are able to do it without effecting the position of other containers.
0

paldong-creater•170

@paldong-createrPosted 11 months ago

Hi, I like the radial animation for the winner. How did you implemented it. I failed to do so....

tomahawk-jupiter•150

@tomahawk-jupiterPosted 11 months ago

@paldong-creater

The effect in isolation is below (its also in my repo ripple.html). Once I figured out how that would look, I then figured out how to add it where it was needed.

I use javascript to create and append the html to a div (which is already in index.html) for either the player or the house (#player-ripple-container or #house-ripple-container). This is done in main.js in a function called applyRippleEffect


  </head>
  <body>
    <div class="circles-container">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </body>

const applyRippleEffect = (result) => {
  const circlesContainer = document.createElement("div");
  circlesContainer.className = "circles-container";

  for (let i = 0; i < 4; i++) {
    const circle = document.createElement("div");
    circle.className = "circle";
    circlesContainer.appendChild(circle);
  }

  if (result === "DRAW") return;

  const rippleContainer =
    result === "YOU WIN" ? playerRippleContainer : houseRippleContainer;

  rippleContainer.appendChild(circlesContainer);
};

Please log in to post a comment

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