JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id = "wrapper">
    <table></table>
    <button>Change</button>
</div>

Math.floor(Math.random() * (max - min + 1)) + min;

CSS

table{margin:15px;}

td{
    width: 30px;
    height: 30px;
    border: 1px solid black;
    text-align: center;
}

.tr1 {border-top: 2px solid black;}
.tr4 {border-top: 2px solid black;}
.tr6 {border-bottom: 2px solid black;}
.tr9 {border-bottom: 2px solid black;}

tr {border-left: 2px solid black;
    border-right: 2px solid black; 
}

.td3 {border-right: 2px solid black;}
.td6 {border-right: 2px solid black;}

JavaScript

var z = 0,
    tdsq = 1,
    tdi = 1,
    n = 0,
    m = 0,
    cellNums = [],
    cellIndex = 0,
    index = 0,
    celldata, thatsquare, min = 1,
    max = 9,
    rowTd = [[], []],
    rowSquare = [[], []],
    classes;

for (i = 1; i <= 9; i++) {
    $('table').append('<tr class = "tr' + i + '"></tr>');
    tdi = 1;
    tdsq = 1;
    if (i > 3 && i < 7) {
        tdsq += 3;
    } else if (i > 6) {
        tdsq += 6;
    }
    for (j = 1; j <= 3; j++) {
        for (k = 1; k <= 3; k++) {
            $('.tr' + i).append('<td class = "td' + tdi + ' sq' + tdsq + '"></td>');
            tdi++;
        }
        tdsq++;
    }
}

//GenArray
for (l = 0; l < 10; l++) {
    cellNums[l] = l + 1;
}

function getRandom() {
    cellIndex = Math.floor(Math.random() * (max - min + min)) + min;
    return cellIndex;
}

function getCellData(CDrow) {
    celldata = $('.tr' + CDrow + ' .td' + cellIndex).html();
    return celldata;
}

//Filling first row
n = 1;
while (n <= 9) {
    getRandom();
    getCellData(1);
    if (celldata === '') {
        $('.tr1 .td' + cellIndex).append(n);
        n++;
    }
}
//Filling fourth row
n = 1;
while (n <= 9) {
    getRandom();
    first = getCellData(1);
    fourth = getCellData(4);
    if (fourth === '' && n != first) {
        $('.tr4 .td' + cellIndex).append(n);
        n++;
    }
}
//Filling seventh row
n = 1;
while (n <= 9) {
    getRandom();
    first = getCellData(1);
    fourth = getCellData(4);
    seven = getCellData(7);
    if (seven === '' && n != first && n != fourth) {
        $('.tr7 .td' + cellIndex).append(n);
        n++;
    }
}

function getArray(arrow,row) {
    for (ii = 0; ii < 9; ii++) {
        temptd = $('.tr' + row + ' .td' + (ii + 1)).html();
        switch (temptd) {
        case '1':
            classes = $('.tr' + row + ' .td' + (ii + 1)).attr('class');
            rowSquare[arrow][0] = classes.substr(6, 1);
            rowTd[arrow][0] = classes.substr(2, 1);
            break;
        case '2':
           ...