script.js

let userScore = 0;
let compScore = 0;

const choices = document.querySelectorAll(".choice");
const msg = document.querySelector("#msg");
const userScorePara = document.querySelector("#user-score")
const compScorePara = document.querySelector("#comp-score")

const genCompChoice = () => {
    const option = ["rock","paper","scissors"];
    const randIdx = Math.floor(Math.random() * 3);
    return option[randIdx];
};
const drawGame = () =>{
    msg.innerText = "GAME WAS DRAW..PLAY AGAIN !!!";
    msg.style.backgroundColor ="orange";
};

const showWinner = (userWin,userChoice,compChoice) => {
    if(userWin){
        userScore++;
        userScorePara.innerText = userScore;
        console.log("you win !!");
        msg.innerText = `YOU WIN !!! Your ${userChoice} Beats Computer ${compChoice}`;
        msg.style.backgroundColor="green";
    }
    else{
        compScore++;
        compScorePara.innerText = compScore;
        
        msg.innerText = `YOU LOSE....Computer ${compChoice} Beats Your ${userChoice}`;
        msg.style.backgroundColor="red";
    }
};
const playGame= (userChoice) => {
    console.log("user choice=",userChoice);
const compChoice = genCompChoice();
console.log("comp choice= ",compChoice)   


if (userChoice=== compChoice){
    drawGame();
}
else{
    let userWin = true;
    if(userChoice === "rock"){
       userWin = compChoice ==="paper"? false:true;
    }
    else if(userChoice === "paper"){
        userWin = compChoice ==="scissors"? false:true;
     }
     else {
        userWin = compChoice ==="rock"? false:true;
     }

     showWinner(userWin,userChoice,compChoice);
}
};

choices.forEach((choice) => {
    choice.addEventListener("click",() =>{
        const userChoice = choice.getAttribute("id");
        console.log("choice was clicked",userChoice);
        playGame(userChoice);
    });
    });