script.js

let userScore=0;
let compScore=0;

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

const uScore = document.querySelector("#userScore");
const cScore = document.querySelector("#compScore");

const genCompChoice = () =>{
    //generation of computer choice
    const options=["rock","paper","sissors"];
    const randomIdx = Math.floor(Math.random() * 3);
    return options[randomIdx];
};

let showWinner = (userWin,userChoice,compChoice) =>{
    if(userWin){
        userScore++;
        uScore.innerText = userScore;
        console.log("You Win!");
        msg.innerText=`You Win! ${userChoice} beats ${compChoice}`;
        msg.style.backgroundColor="green";
    }else{
        compScore++;
        cScore.innerText = compScore;
        console.log("You lose!");
        msg.innerText=`You Lose! ${compChoice} beats ${userChoice}`;
        msg.style.backgroundColor="red";
    }
};

const playGame = (userChoice) =>{
    console.log("User choice =",userChoice);
    const compChoice=genCompChoice();
    console.log("Comp choice =",compChoice);

    if(userChoice==compChoice){
        //Draw game
        drawGame();
    } else{
        let userWin= true;
        if(userChoice === "rock"){
            //sissors,paper
            userWin = compChoice==="paper"? false:true ;
        }
        else if(userChoice === "paper"){
            //rock,sissors
            userWin = compChoice==="sissors"? false : true;
        }
        else{
            //rock,paper
            userWin = compChoice==="rock"? false : true;
        }
        showWinner(userWin,userChoice,compChoice);
    }
};

const drawGame =()=>{
    console.log("Game was Draw!");
    msg.innerText="It is a draw!Play Again!";
    msg.style.backgroundColor="#6934cb";
};

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


//Change mode button
let modeBtn=document.querySelector("#mode");
let currMode="light";
let body=document.querySelector("body");
modeBtn.addEventListener("click",()=>{
    if(currMode==="light"){
        currMode="dark";
        body.classList.add("dark");
        body.classList.remove("light");
    } else{
        currMode="light";
        body.classList.add("light");
        body.classList.remove("dark")
    }
    console.log(currMode);
})