JSFiddle - React, Tailwind, and code Playground

by Sherali Turdiyev

HTML

<div class="rows">
    <div class="row0"></div>
    <div class="row1"></div>
    <div class="row2"></div>
</div>

CSS

.rows {
    width:556px;
}
.selected {
    background-color: red;
}
.textbox {
    width: 20px;
    height: 20px;
    margin-left: -14px;
    margin-top: -12px;
    text-align: center;
}
.box {
    border:black 1px solid;
    width: 182px;
    height:181px;
    margin:0px auto;
    margin-top:0px;
    cursor:pointer;
    display: inline-block;
    float: left;
    margin-left:0px;
}
.smallbox {
    border:black 1px solid;
    width: 27px;
    height: 27px;
    margin:0px auto;
    margin-top: 0px;
    cursor: pointer;
    display: inline-block;
    float: left;
    margin-left: 0px;
    text-align: center;
    font-size: 28px;
    padding: 15px;
    font-weight: bold;
}

JavaScript

$(document).ready(function () {
    var smallbox = "smallbox";
    var box = "box";
    createBigBox('.row0', box);
    for (var row = 0; row < 9; row++) {
        createBox("." + box + row, smallbox);
    }
    var sudoku_array = [
        '1', '2', '3', '4', '6', '5', '7', '8', '9'];
    $('.smallbox input').each(function (index) {
        $(this).val(sudoku_array[Math.floor(Math.random() * sudoku_array.length)]);
    });
    $('.smallbox').on("click", function () {
        if ($(this).val("")) {
            $(this).val("");
        }
    });

});

createBigBox = function (parent, child) {
    for (var row = 0; row < 9; row++) {
        $(parent).append("<div class='" + child + " " + child + "" + row + "'></div>");
    }
};
createBox = function (parent, child) {
    for (var row = 0; row < 9; row++) {
        $(parent).append("<div class='" + child + " " + child + "" + row + "'><input type='text' class='textbox'/></div>");
    }
};