JSFiddle - React, Tailwind, and code Playground

by Ebony McCoy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table border=1>
<td>
<table border=1>
<tr>
<td><a href="javascript:yourChoice('A')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=A alt="Top-Left"></a></td>
<td><a href="javascript:yourChoice('B')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=B alt="Top-Center"></a></td>
<td><a href="javascript:yourChoice('C')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=C alt="Top-Right"></a></td>
</tr>
<tr>
<td><a href="javascript:yourChoice('D')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=D alt="Middle-Left"></a></td>
<td><a href="javascript:yourChoice('E')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=E alt="Middle-Center"></a></td>
<td><a href="javascript:yourChoice('F')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=F alt="Middle-Right"></a></td>
</tr>
<tr>
<td><a href="javascript:yourChoice('G')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=G alt="Bottom-Left"></a></td>
<td><a href="javascript:yourChoice('H')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100 name=H alt="Bottom-Center"></a></td>
<td><a href="javascript:yourChoice('I')"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Blank_square.svg" border=0 height=100 width=100  name=I alt="Bottom-Right"></a></td>
</tr>
</table>
</td>
<td>
<table>
<tr><td><input type=text size=5 name=you></td><td>You</td></tr>
<tr><td><input type=text size=5...

JavaScript

var x = "x.jpg";
// Location of where you uploaded your site's x.jpg image

var o = "o.jpg";
// Location of where you uploaded your site's o.jpg image

var blank = "blank.jpg";
// Location of where you uploaded your site's blank.jpg image

var pause = 0;
var all = 0;
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
var f = 0;
var g = 0;
var h = 0;
var i = 0;
var temp="";
var ok = 0;
var cf = 0;
var choice=9;
var aRandomNumber = 0;
var comp = 0;
var t = 0;
var wn = 0;
var ls = 0;
//var ts = 0;
function help() {
alert("Welcome to Tic-Tac-Toe!  You play as the X's and the computer is the O's.  Select the square you want to put your X into by clicking them.  You cannot occupy a square that is already occupied. The first player to get three squares in a row wins.  Good Luck!!")
}
function logicOne() {
if ((a==1)&&(b==1)&&(c==1)) all=1;
if ((a==1)&&(d==1)&&(g==1)) all=1;
if ((a==1)&&(e==1)&&(i==1)) all=1;
if ((b==1)&&(e==1)&&(h==1)) all=1;
if ((d==1)&&(e==1)&&(f==1)) all=1;
if ((g==1)&&(h==1)&&(i==1)) all=1;
if ((c==1)&&(f==1)&&(i==1)) all=1;
if ((g==1)&&(e==1)&&(c==1)) all=1;
if ((a==2)&&(b==2)&&(c==2)) all=2;
if ((a==2)&&(d==2)&&(g==2)) all=2;
if ((a==2)&&(e==2)&&(i==2)) all=2;
if ((b==2)&&(e==2)&&(h==2)) all=2;
if ((d==2)&&(e==2)&&(f==2)) all=2;
if ((g==2)&&(h==2)&&(i==2)) all=2;
if ((c==2)&&(f==2)&&(i==2)) all=2;
if ((g==2)&&(e==2)&&(c==2)) all=2;
if ((a != 0)&&(b != 0)&&(c != 0)&&(d != 0)&&(e != 0)&&(f != 0)&&(g != 0)&&(h != 0)&&(i != 0)&&(all == 0)) all = 3;
}
function logicTwo() {
if ((a==2)&&(b==2)&&(c== 0)&&(temp=="")) temp="C";
if ((a==2)&&(b== 0)&&(c==2)&&(temp=="")) temp="B";
if ((a== 0)&&(b==2)&&(c==2)&&(temp=="")) temp="A";
if ((a==2)&&(d==2)&&(g== 0)&&(temp=="")) temp="G";
if ((a==2)&&(d== 0)&&(g==2)&&(temp=="")) temp="D";
if ((a== 0)&&(d==2)&&(g==2)&&(temp=="")) temp="A";
if ((a==2)&&(e==2)&&(i== 0)&&(temp=="")) temp="I";
if ((a==2)&&(e== 0)&&(i==2)&&(temp=="")) temp="E";
if ((a== 0)&&(e==2)&&(i==2)&&(temp=="")) temp="A";
if ((b==2)&&(e==2)&&(h==...