JSFiddle - React, Tailwind, and code Playground

by Abdul Azeem

HTML

<body>
    <div class="middle width450">
        <div class="middle width320">
        <p>Place 8 chess queens on an 8x8 chessboard so that no two queens attack each other &nbsp<a href = "https://nthqueen.appspot.com/">Here is the link to the application (Open in new tab)</a></p>
          </div>
            <button id="btn1" class="buttons" onclick="clickme()">Click Me</button>
            <button id="btn2" class="buttons">Clear</button>
            <button id="btn3" class="buttons">Solution</button>
        </div>
    </div>
</body>

CSS

.odd .odd, .even .even {
    color: #fff;
    background-color: black;
    border : 1px solid white;
}
.even .odd, .odd .even {
    background-color: white;
    border : 1px solid black;
}
td {
    height: 50px;
    width: 52px;
    cursor: pointer;
}
.middle {
    margin : 0 auto;
}
.width320 {
    width : 400px;
}
.width450 {
    width : 450px;
}
.circle {
    background: mediumblue;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: table;
    margin: 0 auto;
}
.queen {
    background-image:url("http://www.expert-chess-strategies.com/images/queen.gif");
    width: 40px;
    height: 40px;
    display: table;
    margin: 0 auto;
    background-repeat: no-repeat;
}
.buttons {
    width: 100px;
    height: 50px;
    display: inline-block;
}
.border {
    border : 2px solid black;
}

#btn3
{
    width : 130px!important;
}

.footer
{
  position:absolute;
  bottom : 10px;
}

JavaScript

// function to create the chessboard
var chess = {
    createBoard: function (dimension) {
        if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
            return false;
        } else {
            dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
            var table = document.createElement('table'),
                tbody = document.createElement('tbody'),
                row = document.createElement('tr'),
                cell = document.createElement('td'),
                rowClone,
                cellClone;
            table.appendChild(tbody);
            for (var r = 0; r < dimension; r++) {
                rowClone = row.cloneNode(true);
                tbody.appendChild(rowClone);
                for (var c = 0; c < dimension; c++) {
                    cellClone = cell.cloneNode(true);
                    rowClone.appendChild(cellClone);
                }
            }
            document.body.appendChild(table);
            table.setAttribute("class", "middle border");
            chess.enumerateBoard(table);
        }
    },
    enumerateBoard: function (board) {
        var rows = board.getElementsByTagName('tr'),
            text = document.createTextNode(""),
            rowCounter,
            len,
            cells;
        for (var r = 0, size = rows.length; r < size; r++) {
            cells = rows[r].getElementsByTagName('td');
            len = cells.length;
            rows[r].className = r % 2 == 0 ? 'even' : 'odd';
            for (var i = 0; i < len; i++) {
                cells[i].className = i % 2 == 0 ? 'even' : 'odd';
                var id = "" + r + i;
                cells[i].setAttribute("id", "" + r + i);
                cells[i].addEventListener("click", myFunction);
            }
        }
    }
};

window.clickme = function() {
    var btn = document.getElementById("btn1");
    btn.disabled = true;
    chess.createBoard(8);
   ...