Rock, Paper, Scissors (JS, frontend-mentor)
Hello,
I'm attempting to build the Rock, Paper, Scissors challenge on FrontendMentor (https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH/hub)
I understand most of the logic, however, I'm confused on how to change visual states of the game. My current solution (https://codepen.io/Matt-CopOffMatt/pen/rNPNwBG) has the game logic for choosing winner vs computer. However, I need to change the layout based on the results (see attached pictures)
How do I go about doing this? Do I just create these elements, add
display: none; and display / remove current section's contents accordingly? Thanks 👍
6 Replies
You can store the 2 img elements in 2 variable (MyPick, computersPick) and based on the result change the src attribute of each one
myPick.src = 'scissors.png'
Yeah but there’s 3 options. Maybe just hide the option that wasn’t picked?
Yeah 3 options = 3 images
You can do that too yea
Hmm okay thank you for the feedback. Just wanted to make sure I go about things the right way 👌🏻
For a tie, do you intend to just have the selected item in the center? It seems better to have it twice, once for the player's choice and once for the computer's choice.
I planned to have two
Was curious on how to go about adding / removing dom elements