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 πŸ‘
No description
6 Replies
Jimster
Jimsterβ€’13mo ago
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'
Matt
MattOPβ€’13mo ago
Yeah but there’s 3 options. Maybe just hide the option that wasn’t picked?
Jimster
Jimsterβ€’13mo ago
Yeah 3 options = 3 images You can do that too yea
Matt
MattOPβ€’13mo ago
Hmm okay thank you for the feedback. Just wanted to make sure I go about things the right way πŸ‘ŒπŸ»
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
Matt
MattOPβ€’13mo ago
I planned to have two Was curious on how to go about adding / removing dom elements
Want results from more Discord servers?
Add your server