JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<table border="1">
<caption>Tic Tac Toe</caption>
  <tbody>
    <tr>
      <td id="a1"></td>
      <td id="b1"></td>
      <td id="c1"></td>
    </tr>
    <tr>
      <td id="a2"></td>
      <td id="b2"></td>
      <td id="c2"></td>
    </tr>
    <tr>
      <td id="a3"></td>
      <td id="b3"></td>
      <td id="c3"></td>
    </tr>
  </tbody>
</table>

CSS

td {
  width: 50px;
  height: 50px;  
}

JavaScript

$(document).ready(function() {
	var user = prompt('X or O?').toUpperCase();
  var opponent;
  
  if (user === 'X') {
  	opponent = 'O';
  } else {
  	opponent = 'X';
  }
  
	$('td').click(function() {
  	var theId = $(this).attr('id');
    check(theId);
  	$(this).text(theId).css({"text-align": "center", "background":"red"});
  });
  
});

a123, b123, c123
a3, b2, c1
a1, b2, c3

function check(val) {
	if (val[0] === 'a') {
  	alert('It\'s an a');
    $('a')
  }
}