JSFiddle - React, Tailwind, and code Playground

by JoshKono

HTML

<table>
        <tr class="topRow">
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 1)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 2)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 3)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 4)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 5)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 6)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 7)"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <button type="button" onclick="resetBoard()">Empty Tokens</button>

CSS

able {
    border-bottom: 4px solid black;
    border-left: 4px solid black;
    border-right: 4px solid black; 
}

td {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 2px solid black;
}

.topRow td {
    border: 2px solid white;
    margin-bottom: 10px;
}

button {
    width: 400px;
    height: 40px;
    margin-top: 20px;
    margin-left: 10px;
    font-family: Calibri;
    font-weight: bold;
    font-size: 25px;
}

JavaScript

var playerTurn = "Red"
        var column = 0;

        function tokenColor (obj) 
        {
            if (playerTurn == "Red")
            {
                obj.style.background = "Red";
                obj.style.border = "2px solid black";
            }
            else
            {
                obj.style.backgroundColor = "Blue";
                obj.style.border = "2px solid black";
            }
        }

        function noToken(obj)
        {
            obj.style.backgroundColor = "white";
            obj.style.border = "2px solid white";
        }

        function dropToken(obj, column)
        {
            $('table tr:last-child td:nth-child(' + column + ')').css("background-color", playerTurn);
            if (playerTurn == "Red")
            {
                playerTurn = "Blue"
                obj.style.backgroundColor = "Blue";   
            }
            else
            {
                playerTurn = "Red"
                obj.style.backgroundColor = "Red"; 
            }
        }

        function resetBoard()
        {
            location.reload()
        }