script.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 msg=document.querySelector("#msg");

//player x player 0
let turnO=true;
//let count=0;
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],
];
/*boxes.array.forEach(element => {
    
});*/
const resetgame=()=>{
    turnO=true;
    enableboxes();
    msgcontainer.classList.add("hide");
  }
boxes.forEach((box) => {
    box.addEventListener("click", () => {
      if (turnO) {
        //playerO
        box.innerText = "O";
        turnO = false;
        //box.style.color="blue";
      } else {
        //playerX
        box.innerText = "X";
        turnO = true;
      }
      box.disabled = true;
      //count++;
  
      let isWinner = 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 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){
                showWinner(pos1val);
                return true;
            }
        }
    }
  }
  ;
  newgamebtn.addEventListener("click",resetgame);
  resetbtn.addEventListener("click", resetgame);