Untitled

<!DOCTYPE html>
<html>
    <head>
        <link href="navBar.css" type="text/css" rel="stylesheet">
        <link href="checkers.css" type="text/css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
                <title>Checkers</title>
    </head>
<body>
    <h1>Checkers</h1>
    <table>
        <tr>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
        </tr>
        <tr>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
        </tr>
        <tr>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"><div class="blackCoin" onclick="pickCoin(this)"></div></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
        </tr>
        <tr>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
        </tr>
        <tr>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"></td>
        </tr>
        <tr>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
        </tr>
        <tr>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
        </tr>
        <tr>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
            <td class="darkCell" onclick="moveCoin(this)"><div class="whiteCoin" onclick="pickCoin(this)"></div></td>
            <td class="lightCell" onclick="moveCoin(this)"></td>
        </tr>
    </table>
    <button type="button">Reset Board</button>
    <script type="text/javascript">
        var moveReady = false;
        var activeCoin = "";
        var playerTurn = "Red";
        var divOrTable = "div"

        function pickCoin(obj) {
            if (divOrTable == "div"){
                moveReady = true;
                activeCoin = obj;
                divOrTable = "table";
            }
        }

        function moveCoin(obj) {
            if (divOrTable == "table") {
                if (moveReady === true) {
                    //MOVE activeCoin TO obj
                    if (playerTurn == "Red") {
                        playerTurn = "Black";
                    }
                    else {
                        playerTurn = "Red";
                    }
                }
                divOrTable = "div";
            }
        }
    </script>
</body>
</html>