JSFiddle - React, Tailwind, and code Playground

by nouse4contact

HTML

<table width="300" height="300">
  <tr>
    <td>
      <div id="field1"></div>
    </td>
    <td>
      <div id="field2"></div>
    </td>
    <td>
      <div id="field3"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="field4"></div>
    </td>
    <td>
      <div id="field5"></div>
    </td>
    <td>
      <div id="field6"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="field7"></div>
    </td>
    <td>
      <div id="field8"></div>
    </td>
    <td>
      <div id="field9"></div>
    </td>
  </tr>
</table>

CSS

body {
		  background: #000;
		}

		#field1 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field2 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field3 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field4 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field5 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field6 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field7 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field8 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

		#field9 {
		  background: #FFFFFF;
		  width: 100px;
		  height: 100px;
		}

JavaScript

< !DOCTYPE html >
  <
  html lang = "en" >
  <
  head >
  <
  meta charset = "utf8" >
  <
  title > Let 's play Tic Tac Toe!</title> <
  script type = "text/javascript"
src = "jquery.js" > < /script> <
  script type = "text/javascript" >
  $(document).ready(function() {
    var f1;
    var f2;
    var f3;
    var f4;
    var f5;
    var f6;
    var f7;
    var f8;
    var f9;
    var count = 0;

    $('#field1').click(function() {
      if (f1 != "X" && f1 != "O") {
        $(this).css('background-image', 'url(http://i61.tinypic.com/faz9g3.png)');
        f1 = "X";
        count++;
        checkVictory();
        randomize();
      }
    });
    $('#field2').click(function() {
      if (f2 != "X" && f2 != "O") {
        $(this).css('background-image', 'url(http://i61.tinypic.com/faz9g3.png)');
        f2 = "X";
        count++;
        checkVictory();
        randomize();
      }
    });
    $('#field3').click(function() {
      if (f3 != "X" && f3 != "O") {
        $(this).css('background-image', 'url(http://i61.tinypic.com/faz9g3.png)');
        f3 = "X";
        count++;
        checkVictory();
        randomize();
      }
    });
    $('#field4').click(function() {
      if (f4 != "X" && f4 != "O") {
        $(this).css('background-image', 'url(http://i61.tinypic.com/faz9g3.png)');
        f4 = "X";
        count++;
        checkVictory();
        randomize();
      }
    });
    $('#field5').click(function() {
      if (f5 != "X" && f5 != "O") {
        $(this).css('background-image', 'url(http://i61.tinypic.com/faz9g3.png)');
        f5 = "X";
        count++;
        checkVictory();
        randomize();
      }
    });
    $('#field6').click(function() {
      if (f6 != "X" && f6 != "O") {
        $(this).css('background-image', 'url(http://i61.tinypic.com/faz9g3.png)');
        f6 = "X";
        count++;
        checkVictory();
        randomize();
      }
    });
    $('#field7').click(function() {
      if (f7 != "X" && f7 != "O") {
       ...