app.js

let boxes=document.querySelectorAll(".box");
let resetBtn=document.querySelector("#reset-btn")
let newGameBtn=document.querySelector("#new-btn")
let msgContainer=document.querySelector(".msg-container")
let turn0=true;
let msg=document.querySelector("#msg")
const winPatters=[
    [0,1,2],
    [0,3,6],
    [0,4,8],
    [1,4,7],
    [2,5,8],
    [2,4,6],
    [3,4,5],
    [6,7,8]
];
boxes.forEach(box => {

    box.addEventListener("click",()=>{

      if(turn0){
        box.innerHTML="O"
        turn0=false;
      }
      else{
        box.innerHTML='X'
        turn0=true;
      }
      checkWinner()
      box.disabled=true;
    })

});


const disableBOxes=()=>{
    for(let box of boxes){
        box.disabled=true;
    }
}
const enabledBoxes=()=>{
    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 winPatters){
         
    let pos1=boxes[pattern[0]].innerText;
    let pos2=boxes[pattern[1]].innerText;
    let pos3=boxes[pattern[2]].innerText;
   if(pos1!=""&&pos2!=""&&pos3!=""){
    if(pos1===pos2&&pos2===pos3){
       showWinner(pos1)
    }
   }

}


}

const resetGame=()=>{
    turn0=true;
    enabledBoxes()
    msgContainer.classList.add("hide")

}
newGameBtn.addEventListener(
    "click",resetGame
)
resetBtn.addEventListener("click",
    resetGame
)