Play Tic Tac Toe Online - No Instructions Needed

<div>
  <h1>Tic Tac Toe</h1>
  <div class='grid-container'>
    <div class='grid-item' data-cell='1'></div>
    <div class='grid-item' data-cell='2'></div>
    <div class='grid-item' data-cell='3'></div>
    <div class='grid-item' data-cell='4'></div>
    <div class='grid-item' data-cell='5'></div>
    <div class='grid-item' data-cell='6'></div>
    <div class='grid-item' data-cell='7'></div>
    <div class='grid-item' data-cell='8'></div>
    <div class='grid-item' data-cell='9'></div>
  </div>
</div>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
  }
  .grid-item {
    background-color: #8ac4ff;
    width: 70px;
    height: 70px;
    text-align: center;
    font-size: 40px;
    font-family: sans-serif;
    color: white;
    border: 3px solid #7d9fc9;
  }
</style>
<script>
  const gridContainer = document.querySelector('.grid-container');
  const gridItems = document.querySelectorAll('.grid-item');
  const xo = ['X', 'O'];
  let turn = 0;

  gridContainer.addEventListener('click', e => {
    const target = e.target;
    if(target.textContent === '') {
      target.textContent = xo[turn];
      turn === 0 ? turn = 1 : turn = 0;
    }
  });
</script>