app.js

let boxes=document.querySelectorAll(".box");
let resetbtn=document.querySelector(".reset");
let newGame=document.querySelector("#newGame");
let msgConatiner=document.querySelector(".msg-container");
let msg=document.querySelector("#msg");

let player1=true;
const winning=[[0,1,2],[3,4,5],[6,7,8],[2,5,8],[0,4,8],[2,4,6],[0,3,6],[1,4,7]];

const resetGame=()=>{
  player1=true;
  enableBoxes();
  msgConatiner.classList.add("hide");
}

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

const diableBoxes=()=>{
  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}`;
msgConatiner.classList.remove("hide");
  diableBoxes();
}
  
const checkWinner=()=>{
for (pattern of winning){
  console.log(boxes[pattern[0]],boxes[pattern[1]],boxes[pattern[2]]);

  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);
    
    }
  }
};
};
newGame.addEventListener("click",resetGame);
resetbtn.addEventListener("click",resetGame);