script.js

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

let turnX=true;
const winningPattern=[
    [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=()=>{ 
    turnX=true;
    enableboxes();
    msgcontainer.classList.add("hide");
}
 boxes.forEach((box)=>{
    box.addEventListener("click",()=>{
        if(turnX==true){
            box.innerText="X";
            turnX=false;
        }
        else{
            box.innerText="O";
            turnX=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="";
    }
 }
const showwinner=(winner)=>{
    msg.innerText=`congratulations winner ,is ${winner}`;
    msgcontainer.classList.remove("hide");
    disableboxes();
}
 const checkwinner=()=>{
    for(let pattern of winningPattern){
        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){
showwinner(pos1val);
            }
        }
    }
 }
 newbtn.addEventListener("click",resetGame);
 reset.addEventListener("click",resetGame);