java.js

let boxes=document.querySelectorAll(".box");
let reset=document.getElementById("reset");
let msgcontainer=document.querySelector(".msg-container");
let newbtn=document.querySelector("#newbtn");
let msg=document.querySelector("#msg");

let turn0= true;
const winPattern=[
    [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=()=>{
    turn0=true;
    enableBoxes();
    msgcontainer.classList.add("hide");
}

boxes.forEach((box)=>{
    box.addEventListener("click",()=>{
        if(turn0){
            box.innerText="O";
            turn0=false;
        }
        else{
            box.innerText="X";
            box.style.color="white"
            turn0=true;
        }
        box.disabled=true;
        checkWinner();
    });
});
const disableBoxes=()=>{
    for(let box of boxes){
        box.disabled=true;
    }
};
const enableBoxes=()=>{
    for(let box of boxes){
        box.disabled=false;
        box.innerText="";
        box.style.color="";
    }
};
const showWinner =(winner)=>{
    msg.innerText=`Congratulations, Winner is ${winner}`;
    msgcontainer.classList.remove("hide");
    disableBoxes();
};
const checkWinner=()=>{
    for(let patterns of winPattern){
        let posVal1=boxes[patterns[0]].innerText;
        let posVal2=boxes[patterns[1]].innerText;
        let posVal3=boxes[patterns[2]].innerText;

        if(posVal1!="" && posVal2!="" && posVal3!=""){
            if(posVal1===posVal2 && posVal2===posVal3){
                console.log("Winner",posVal1);
                showWinner(posVal1);
            }
        }
    }

};
newbtn.addEventListener("click",resetGame);
reset.addEventListener("click",resetGame);