JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<table align="center" id="board">
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

CSS

table {
  border: 1px solid blue;
  width: 200px;
  height: 200px;
}

td {
  text-align: center;
  width: 33%;
  height: 33%;
}

tr:nth-child(odd) td:nth-child(odd), 
tr:nth-child(even) td:nth-child(even) {
  background: blue;
}

JavaScript

var move = 1;
var play = true;

$("#board tr td").click(function() {
  if ($(this).text().trim() == "" && play == true) {
    if ((move % 2) == 1) {
      $(this).append("X");
    } else if ((move % 2) == 0) {
      $(this).append("O");
    }
    move++;
  } else {
    console.log("Enter correct input");
  }
});