script.js

let boxes=document.querySelectorAll(".box");
let resetBtn=document.querySelector("#reset-btn");
let msg=document.querySelector("#msg");
let msg_container=document.querySelector(".hide");


let turnO=true;  //playerX , playerO

const winPatterns=[
    [0,1,2],
    [0,3,6],
    [0,4,8],
    [1,4,7],
    [2,5,8],
    [2,4,6],
    [3,4,5],
    [6,7,8]
]

const resetGame= ()=>{
    turnO=true;
    enableBoxes();
}

const disableBoxes=()=>{
      for (box of boxes){
        box.disabled=true;
      }
}

const enableBoxes=()=>{
    for (box of boxes){
      box.disabled=false;
      box.innerText="";
      msg_container.classList.add("hide");
    }
}

const showWinner = (Winner) => {
       msg.innerText=`Congrats..🥳 Player ${Winner} Wins the Game 🎉`;
       msg_container.classList.remove("hide");
       disableBoxes();
}

const checkWinner=()=>{
    for (let pattern of winPatterns){
       
        let pos1Val = boxes[pattern[0]].innerText;
        let pos2Val = boxes[pattern[1]].innerText;
        let pos3Val = boxes[pattern[2]].innerText;
        
        if(pos1Val!="" && pos2Val!="" && pos3Val!=""){
            if(pos1Val==pos2Val && pos2Val==pos3Val){
                console.log("Winner" , pos1Val);
                showWinner(pos1Val);
            }
        }
    }
}


boxes.forEach((box) => {
    box.addEventListener("click",() => {
        console.log("A box was clicked");
        if(turnO==true){
            box.innerText="O";
            turnO=false;
        }else{
           box.innerText="X";
           turnO=true;
        }
        box.disabled=true;
        checkWinner();
    }) 
   
})

resetBtn.addEventListener("click",resetGame)