JSFiddle - React, Tailwind, and code Playground

by hmahida

HTML

<body onload= "startGame();" background="http://www.clipartbest.com/cliparts/dcr/eKa/dcreKaqoi.gif">
    <center><h1><font color ="black" size="30"> Tic-Tac-Toe!</font></h1></center>
    <center><div id=message> message will be here </div></center>
    <center><table border= "15" bgcolor= "#FFFFFF">
        <tr>
            <td id="s1" class= "Square" onclick="nextMove(this);"></td>
            <td id="s2" class= "Square" onclick="nextMove(this);"></td>
            <td id="s3" class= "Square" onclick="nextMove(this);"></td>
        </tr>
        <tr>
            <td id="s4" class= "Square" onclick="nextMove(this);"></td>
            <td id="s5" class= "Square" onclick="nextMove(this);"></td>
            <td id="s6" class= "Square" onclick="nextMove(this);"></td>
        </tr>
        <tr>
            <td id="s7" class= "Square" onclick="nextMove(this);"></td>
            <td id="s8" class= "Square" onclick="nextMove(this);"></td>
            <td id="s9" class= "Square" onclick="nextMove(this);"></td>
        </tr>
    </table></center>
    <center><button type="button" onclick=startGame()> Start New Game</button></center>
    <center><p> Created By Claire Fuesting</p></center>
</body>

CSS

.Square
        {
        width:60px;
        height: 60px;
        text-align:center;
        font-size: 30pt;
        font-weight: bold;
        font-family: Verdana;
        }

JavaScript

function startGame()
                {
                    for (var i = 1; i<= 9; i = i + 1)
                    {
                        clearBox(i);
                    }

                document.turn = "X";
                if (Math.random()< 0.5)
                {
                    document.turn = "O";
                }
                document.winner = null;
                setMessage(document.turn + " gets to start.");
            }

            function setMessage(msg)
            {
            document.getElementById("message").textContent = msg;
            }

            function nextMove(square)
            {
                if (document.winner != null)
                {
                    setMessage(document.winner + " Already Won the Game!");
                }
                else if (square.textContent == "")
                {
                    square.textContent = document.turn;
                    switchTurn();
                }
                else
                {
                    setMessage("That Square is Already Used.")
                }
            }

            function switchTurn()
            {
                if(checkForWinner(document.turn))
                {
                    setMessage("Congratulations " + document.turn + "! You Win!");
                    document.winner = document.turn;
                }
				else
				if(CheckforTie())
				{
					setMessage("Its a TIE..!! Play again...!!!");
				}
                    else if (document.turn == "X")
                        {
                            document.turn ="O";
                            setMessage("It's " + document.turn + "'s turn!");
                        }
                    else
                    {
                        document.turn ="X";
                        setMessage("It's " + document.turn + "'s turn!");
                    }
            }

            function checkForWinner(move)
            {
                var result = false;
          ...