JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<button id="btn">Check</button>

CSS

table.main
{
    border: 2px solid #000;
    margin: 30px auto;
}
table.sub {
    text-align: center;
    width: 100px;
    height: 100px;
    border-color: #666;
}
input[type=text].val{
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: transparent;
}
input[type=text].val:focus {
    background: #fafafa;
}

JavaScript

var  ints = {
     "a1":-1,"b1":-1,"c1":-1,"d1":-1,"e1":-1,"f1":-1,"g1":-1,"h1":-1,"i1":-1,
     "a2":-1,"b2":-1,"c2":-1,"d2":-1,"e2":-1,"f2":-1,"g2":-1,"h2":-1,"i2":-1,
     "a3":-1,"b3":-1,"c3":-1,"d3":-1,"e3":-1,"f3":-1,"g3":-1,"h3":-1,"i3":-1,
     "a4":-1,"b4":-1,"c4":-1,"d4":-1,"e4":-1,"f4":-1,"g4":-1,"h4":-1,"i4":-1,
     "a5":-1,"b5":-1,"c5":-1,"d5":-1,"e5":-1,"f5":-1,"g5":-1,"h5":-1,"i5":-1,
     "a6":-1,"b6":-1,"c6":-1,"d6":-1,"e6":-1,"f6":-1,"g6":-1,"h6":-1,"i6":-1,
     "a7":-1,"b7":-1,"c7":-1,"d7":-1,"e7":-1,"f7":-1,"g7":-1,"h7":-1,"i7":-1,
     "a8":-1,"b8":-1,"c8":-1,"d8":-1,"e8":-1,"f8":-1,"g8":-1,"h8":-1,"i8":-1,
     "a9":-1,"b9":-1,"c9":-1,"d9":-1,"e9":-1,"f9":-1,"g9":-1,"h9":-1,"i9":-1
};

var x = ["a","b","c","d","e","f","g","h","i"];
var r = function(n)
{
    return Math.ceil(n/3);
};
var c = function(n)
{
    return n % 3 || 3;
};
var z = function(a)
{
     return Math.floor(x.indexOf(a)/3);
};
var y = function(a)
{
    return x.indexOf(a) % 3;
};

function getBoxVals(a,n)
{
    var res = [];
    for (var i = 0; i < x.length; i++)
    {
        var val = ints[x[i] + n.toString()];
        res[i] = (val == -1) ? (x[i] + n.toString()) : val;
    }
    return res;
}

function getHorzVals(a,n)
{
    var res = [];
    for (var i = 0; i < 3; i++)
    {
        for (var m = 0; m < 3; m++)
        {
            res[i * 3 + m] = x[z(a)*3+m] + (r(n)+i).toString();
        }
    }
    return res;
}

function updateData()
{
    var ind = this.id;
    var val = this.value;
    ints[ind] = parseInt(val);
    this.value = !isNaN(parseInt(val)) ? val : "";
    console.log(val);
}


function getVertVals(a,n)
{
    var res = [];
    for (var i = 0; i < 3; i++)
    {
        for (var m = 0; m < 3; m++)
        {
            res[i * 3 + m] = x[y(a)+(m*3)] + (c(n)+(i*3)).toString();
        }
    }
    return res;    
}
function createSudoko()
{
    var table = document.createElement("table");
    var tr1, tr2;
    table.className = "main";
    table.border =...