JSFiddle - React, Tailwind, and code Playground

by Bill Withers

HTML

<meme>---------------------Tic Tac Toe---------------------</meme>
<table style="width:60%">
  <tr>
    <td id="x1y1" onclick='placesymbol(this)'> </td>
    <td id="x1y2" onclick='placesymbol(this)'> </td>
    <td id="x1y3" onclick='placesymbol(this)'> </td>
  </tr>
  <tr>
    <td id="x2y1" onclick='placesymbol(this)'> </td>
    <td id="x2y2" onclick='placesymbol(this)'> </td>
    <td id="x2y3" onclick='placesymbol(this)'> </td>
  </tr>
  <tr>
    <td id="x3y1" onclick='placesymbol(this)'> </td>
    <td id="x3y2" onclick='placesymbol(this)'> </td>
    <td id="x3y3" onclick='placesymbol(this)'> </td>
  </tr>
</table>

CSS

meme {
  color: magenta;
  font-weight: bold;
  font-size: 20px;
  font-family: "";
}

table,
tr,
td {
  border: 1px solid black;
}

th,
td {
  padding: 60px;
  color: magenta;
  font-size: 20px;
  font-weight: bold;
  font-family: "Courier New";
  background: radial-gradient(cyan, pink, lightgreen);
}

th {
  text-align: center;
}

JavaScript

let xo = "X"
var tie = 0;
function reset() {
  document.getElementById('x1y1').innerHTML = ' ';
  document.getElementById('x1y2').innerHTML = ' ';
  document.getElementById('x1y3').innerHTML = ' ';
  document.getElementById('x2y1').innerHTML = ' ';
  document.getElementById('x2y2').innerHTML = ' ';
  document.getElementById('x2y3').innerHTML = ' ';
  document.getElementById('x3y1').innerHTML = ' ';
  document.getElementById('x3y2').innerHTML = ' ';
  document.getElementById('x3y3').innerHTML = ' ';
}

function placesymbol(cell) {
  if (cell.innerHTML === ' ') {
    cell.innerHTML = xo
    if (xo == "X") {
      xo = "O";
      tie++;
    } else if (xo == "O") {
      xo = "X";
      tie++
    }
  }
  if (document.getElementById('x1y1').innerHTML === 'X' && document.getElementById('x1y2').innerHTML === 'X' && document.getElementById('x1y3').innerHTML === 'X') {
    window.alert('X has won');
    reset();
  }
  if (document.getElementById('x2y1').innerHTML === 'X' && document.getElementById('x2y2').innerHTML === 'X' && document.getElementById('x2y3').innerHTML === 'X') {
    window.alert('X has won');
    reset();
  }
  if (document.getElementById('x3y1').innerHTML === 'X' && document.getElementById('x3y2').innerHTML === 'X' && document.getElementById('x3y3').innerHTML === 'X') {
    window.alert('X has won');
    reset();
  }
  if (document.getElementById('x1y1').innerHTML === 'X' && document.getElementById('x2y1').innerHTML === 'X' && document.getElementById('x3y1').innerHTML === 'X') {
    window.alert('X has won');
    reset();
  }
  if (document.getElementById('x1y1').innerHTML === 'X' && document.getElementById('x2y2').innerHTML === 'X' && document.getElementById('x3y3').innerHTML === 'X') {
    window.alert('X has won');
    reset();
  }
  if (document.getElementById('x1y2').innerHTML === 'X' && document.getElementById('x2y2').innerHTML === 'X' && document.getElementById('x3y2').innerHTML === 'X') {
    window.alert('X has won');
    reset();
  }
  if...