JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<body>
 <div id="playersTurn">&nbsp;</div>
 <div id="winnerIs"></div>
 <table id="tttTable" align="center">
 <tr>
  <td id="cell1x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  <td id="cell1x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell1x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  </tr>
 <tr>
   <td id="cell2x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell2x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell2x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   </tr>
  <tr>
  <td id="cell3x1" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  <td id="cell3x2" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
   <td id="cell3x3" class="cell" onclick="cellClick(this);" onMouseOver="mouseMotion(this, 'over');" onMouseOut="mouseMotion(this, 'out');">&nbsp;</td>
  </tr>
  </table>
  <input id="newGameBtn" type="button" value="Start New Game" onclick="startNewGame();" />
   </body>

CSS

#tttTable
  {
    width: 600px;
   height: 600px;
  }

 .cell
  {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  text-align: center;
  font-weight: bold;
  font-size: 4em;
 }

#newGameBtn
{
  margin-left: 46%;
}

#playersTurn
{
 text-align: center;
 font-weight: bold;
 font-size: 1.1em;
 height: 10px;
}

#outer 
{ 
 width: 600px; 
}

JavaScript

var cell;
var nextTurn = 'X';



function mouseMotion(ref,motion){
if(motion == 'over')
    {
        ref.style.borderColor='#E00';
    }
    else if(motion == 'out')
    {
        ref.style.borderColor='#CCC';
    }
}

function cellClick(cell){
if (cell.innerHTML === 'X' || cell.innerHTML === 'O')
{ alert ('Square has already been choosen, please select another square');
return
}
cell.innerHTML = nextTurn;
playersTurn();
winnerIs();

 }
function playersTurn(){
if(nextTurn == 'X'){
    nextTurn = 'O';
    }
else {
    nextTurn = 'X';
    }
}

function winnerIs(){

if (document.getElementById("cell1x1").innerHTML == 'X' &&    document.getElementById("cell1x2").innerHTML == 'X' && document.getElementById("cell1x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';

}

else if (document.getElementById("cell2x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell2x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell3x1").innerHTML == 'X' && document.getElementById("cell3x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x1").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x3").innerHTML == 'X')
{document.getElementById('winnerIs').innerHTML = 'Player 1 Wins!';
 document.getElementById('winnerIs').style.display = 'block';
 }
else if (document.getElementById("cell1x3").innerHTML == 'X' && document.getElementById("cell2x2").innerHTML == 'X' && document.getElementById("cell3x1").innerHTML ==...