Rock, Paper, Scissors

by Aboubacar Bah

HTML

<h1>Rock, Paper, Scissors</h1>

    <div id="playerChoice">
        <label for="rock"><input type="radio" value="rock" name="yourHand" checked> Rock</label>
        <label for="paper"><input type="radio" value="paper" name="yourHand"> Paper</label>
        <label for="scissors"><input type="radio" value="scissors" name="yourHand"> Scissors</label>
    </div>

    <br>
    <button id="playBtn">Play!</button>
    <br>

    <div id="computerChoice">
        The Computer hand is <span id="computerHand"></span>.
        <div id="winHand" class="message">You won! but just for this time ^^</div>
        <div id="loseHand" class="message">You lost! Maybe next time </div>
        <div id="drawHand" class="message">It is a draw! Try again at your own risk</div>
    </div>

CSS

.message, #computerChoice {
    display: none;
}

JavaScript

// Get the elements 
let playBtn = document.querySelector("#playBtn");
let computerChoice = document.querySelector("#computerChoice");
let computerHand = document.querySelector("#computerHand");
let winHand = document.querySelector("#winHand");
let loseHand = document.querySelector("#loseHand");
let drawHand = document.querySelector("#drawHand");

playBtn.addEventListener("click", playGame);

function playGame() {

    let playerHand = document.querySelector('input[name="yourHand"]:checked').value;

    // The computer ramdomly chooses a hand
    let choices = ["rock", "paper", "scissors"];
    let random = Math.floor(Math.random() * Math.floor(choices.length));
    let play = choices[random];

    let draw = "";
    let win = "";
    // You win if your hand beats the computer hand
    if ((playerHand == "rock" && play == "scissors") || (playerHand == "paper" && play == "rock") || (playerHand == "scissors" && play == "paper")) {
         win = playerHand;
    }

    else if ((playerHand == "rock" && play == "paper") || (playerHand == "paper" && play == "scissors") || (playerHand == "scissors" && play == "rock")) {
        win = play;
    }

    else {
         draw = playerHand == play;
    } 

    // Update the page
    computerHand.innerHTML = play;

    // Briefly hide and then show the results again
    // This way when the results are the same as the previous round
    // It doesn't look like nothing happens when the button is clicked
    computerChoice.style.display = 'none';
    setTimeout(function () {
        computerChoice.style.display = 'block';
    }, 100);

    if (win == playerHand) {
        winHand.style.display = "block";
        loseHand.style.display = "none";
        drawHand.style.display = "none";
    }
    else if (win == play) {
        winHand.style.display = "none";
        loseHand.style.display = "block";
        drawHand.style.display = "none";
    }
    else if (draw) {
        winHand.style.display = "none";
       ...