JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="board" id="board">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>
<div id="result"></div>

CSS

.board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 10px;
}

.cell {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  border: 1px solid #000;
  cursor: pointer;
}

JavaScript

const board = document.getElementById('board');
const cells = document.querySelectorAll('.cell');
const resultDiv = document.getElementById('result');

let currentPlayer = 'X';
let moves = 0;
let gameEnded = false;

const checkWinner = () => {
  const winningCombination = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  for (const combination of winningCombination) {
    const [a, b, c] = combination;
    if (cells[a].textContent && cells[a].textContent === cells[b].textContent && cells[a].textContent === cells[c].textContent) {
      gameEnded = true;
      return cells[a].textContent;
    }
  }

  if (moves === 9) {
    gameEnded = true;
    return 'Draw';
  }

  return null;
};

const handleClick = (e) => {
  const cell = e.target;
  const index = Array.from(cells).indexOf(cell);

  if (!cell.textContent && !gameEnded) {
    cell.textContent = currentPlayer;
    moves++;
    const winner = checkWinner();

    if (winner) {
      if (winner === 'Draw') {
        resultDiv.textContent = 'It\'s a Draw!';
      } else {
        resultDiv.textContent = `Player ${winner} wins!`;
      }
    } else {
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
  }
};

board.addEventListener('click', handleClick);