JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<div id="output"></div>

<table border="1">
<caption>Tic Tac Toe</caption>
  <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>

<button>restart</button>

CSS

table {
  width: 20%;
  border-color: brown;
}

table td {
  padding: 20px;
}

JavaScript

var io = document.getElementById('output');
var squares = document.getElementsByTagName('td');
var p = chooseLetter();
var restart = document.getElementsByTagName('button')[0];
var playing;
var turn = 0;
var computer;

if (p === 'x' || p === 'o') {
	playing = true;
}

document.addEventListener('click', function (e) {
	var square = e.target;
  if (square.innerText === '') {
  	square.innerText = p;
    computerMove();
  }
});

restart.onclick = function() {
	
  for (var i = 0; i < squares.length; i++) {
  	squares[i].innerText = '';
  }
  
  p = chooseLetter();
};

function chooseLetter() {
	var player = prompt('x or o?').toLowerCase();
  computer = (player === 'x') ? 'o' : 'x';
  return player;
}

function endGame() {
	playing = false;
}

function takeTurns() {
	turn = (turn === 0) ? 1 : 0;
  return turn;
}

function computerMove() {
	for (var i = 0; i < squares.length; i++) {
  	if (squares[i].innerText === '') {
    	squares[i].innerText = computer;
      return;
    }
  }
}

io.innerHTML = takeTurns();