text: const board = document.getElementById("board");
  const cellElements = document.querySelectorAll("[data-cell]");
  const winning_msg_box = document.getElementById("winningMessage");
  const restartButton = document.getElementById("restartButton");
  const winning_msg_text = document.querySelector("[data-winning-message-text]");
  
  const X_CLASS = "x";
  const CIRCLE_CLASS = "circle";
  
  let circleTurn;
  
  const WINNING_COMBINATIONS = [
    [0, 1, 2],
    [0, 4, 8],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [2, 5, 8],
    [2, 4, 6],
    [1, 4, 7],
  ];
  startGame();
  
  restartButton.addEventListener("click", startGame);
  
  function startGame() {
    circleTurn = false;
  
    board.classList.remove(CIRCLE_CLASS);
    board.classList.remove(X_CLASS);
  
    cellElements.forEach((cell) => {
      cell.classList.remove(CIRCLE_CLASS);
      cell.classList.remove(X_CLASS);
  
      cell.removeEventListener("click", handleClick);
      cell.addEventListener("click", handleClick, { once: true });
    });
  
    setHoverClass();
  
    winning_msg_box.classList.remove("show");
  }
  
  function handleClick(e) {
    let currCell = e.target;
    let currClass = circleTurn ? CIRCLE_CLASS : X_CLASS;
  
    if (checkWin(currClass)) {
      // endGame(true);
      console.log("win : " + currClass);
    } else if (checkDraw()) {
      // endGame();
      console.log("draw");
    } else {
      placeMark(currCell, currClass);
      switchTurn();
      setHoverClass();
    }
  }
  
  function switchTurn() {
    circleTurn = !circleTurn;
  }
  
  function placeMark(currCell, currClass) {
    currCell.classList.add(currClass);
  }
  
  function endGame(isWin) {
    if (!isWin) {
      winning_msg_text.innerText = "Draw!";
    } else {
      winning_msg_text.innerText = `${circleTurn ? "O's" : "X's"} Wins!`;
    }
    winning_msg_box.classList.add("show");
  }
  
  function setHoverClass() {
    board.classList.remove(CIRCLE_CLASS);
    board.classList.remove(X_CLASS);
  
    if (circleTurn) {
      board.classList.add(CIRCLE_CLASS);
    } else {
      board.classList.add(X_CLASS);
    }
  }
  
  function checkDraw() {
    return [...cellElements].every((cell) => {
      return (
        cell.classList.contains(CIRCLE_CLASS) || cell.classList.contains(X_CLASS)
      );
    });
  }
  
  function checkWin(currClass) {
    return WINNING_COMBINATIONS.some((combination) => {
      return combination.every((elem) => {
        return cellElements[elem].classList.contains(currClass);
      });
    });
  }
  