script.js

let boxes = document.querySelectorAll(".box");
let resetButton = document.querySelector("#reset-btn");
let turn0 = true;
let countClick = 0;
const winPattern = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];
let newGameBtn = document.querySelector(".new-btn");
let msgPara = document.querySelector(".msg");
let msgContainer = document.querySelector(".msg-container");
boxes.forEach((val) => {
  val.addEventListener("click", () => {
    if (turn0) {
      val.innerText = "O";
      turn0 = false;
    } else {
      val.innerText = "X";
      turn0 = true;
    }
    countClick++;
    val.disabled = true;
    let isWinner = checkWinner();
    if (countClick === 9 && !isWinner) {
      showDraw();
    }
  });
});
const disableBoxes = () => {
  for (box of boxes) {
    box.disabled = true;
  }
};
const enableBoxes = () => {
  for (box of boxes) {
    box.disabled = false;
    box.innerText = "";
  }
};
const showWinner = (winner) => {
  msgPara.innerText = `Congratulations, winner is ${winner}`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};
const showDraw = () => {
  msgPara.innerText = `Match is draw, well played`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};
const checkWinner = () => {
  for (pattern of winPattern) {
    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) {
        disableBoxes();
        showWinner(pos1);
        return true;
      }
    }
  }
};
const resetGame = () => {
  turn0 = true;
  countClick = 0;
  msgContainer.classList.add("hide");
  enableBoxes();
};
newGameBtn.addEventListener("click", resetGame);
resetButton.addEventListener("click", resetGame);