script.js

let userScore=0;
let compScore=0;

const choices=document.querySelectorAll(".choice");
const msg=document.querySelector("#msg");

const myscore=document.querySelector("#my-score");
const compscore=document.querySelector("#comp-score");

const genChoice=()=>{
    let options=["rock","paper","scissor"];
    const rand=Math.floor(Math.random()*3);
    return options[rand];
}
const drawGame=()=>{
    msg.innerText="Game was draw!Play Again";
    msg.style.backgroundColor="black";
}
const showWinner=(userWin,userChoice,compChoice)=>{
    if(userWin){
        userScore++;
        myscore.innerText=userScore;
        msg.innerText=`You Win! Your ${userChoice} beats ${compChoice}`;
        msg.style.backgroundColor="green";
    }
    else{
       compScore++;
       compscore.innerText=compScore;
        msg.innerText=`You Lose!!${compChoice} beats your ${userChoice}`;
        msg.style.backgroundColor="red";
    }
}
const playGame=(userChoice)=>{
    //generate computer choice
    const compChoice=genChoice();
    console.log("comp choice=",compChoice);
    //fight
    if(userChoice==compChoice){
        //draw
        drawGame();
    }
    else{
        let userWin=true;
        if(userChoice=="rock"){
            userWin= compChoice==="paper"?false:true;
        }
        else if(userChoice=="paper"){
            userWin= compChoice==="scissor"?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(userChoice,"was clicked");
        playGame(userChoice);
    });
});