JSFiddle - React, Tailwind, and code Playground

by lithium182

HTML

<div id="main"></div>
<input method="POST" type="button" value="Spocitaj" onclick="count()"/>

CSS

table {
    border-spacing: 0;
}
td {
    border: 1px solid black;
    height: 20px;
    width: 20px;
}

tr.borderBot > td {
    border-bottom: 1px solid red;
}

td.borderRight {
    border-right: 1px solid red;
}

td.correct {
    background-color: green;
}
td.notCorrect {
    background-color: red;
}
/*
td[data-region='0'] {
    background-color: blue;
}

td[data-region='1'] {
    background-color: red;
}

td[data-region='2'] {
    background-color: yellow;
}*/

JavaScript

var main = document.getElementById("main");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tds;
var playNums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var solvedNums = [9, 3, 4, 5, 6, 8, 1, 2, 7, 8, 2, 6, 7, 1, 4, 5, 9, 3, 1, 5, 7, 9, 2, 3, 4, 6, 8, 2, 7, 8, 1, 5, 9, 3, 4, 6, 6, 4, 1, 3, 8, 7, 2, 5, 9, 3, 9, 5, 6, 4, 2, 7, 8, 1, 5, 6, 3, 4, 9, 1, 8, 7, 2, 7, 8, 9, 2, 3, 5, 6, 1, 4, 4, 1, 2, 8, 7, 6, 9, 3, 5];
main.appendChild(table);
table.appendChild(tbody);

createGrid();
setEditableAndRegions();
fillGrid();

function createGrid() {
    for (var i = 0; i < 9; i++) {
        var tr = document.createElement("tr");
        if (i == 2 || i == 5)
            tr.classList.add("borderBot");
        tbody.appendChild(tr);        
        for (var j = 0; j < 9; j++) {
            var td = document.createElement("td");
            td.setAttribute("data-x", j);
            td.setAttribute("data-y", i);
            td.setAttribute("data-counted", "true");
            if (j == 2 || j == 5)
                td.classList.add("borderRight");
            tr.appendChild(td);
        }
    }
}

function fillGrid() {
    var len = tds.length;
    for (var i = 0; i < len; i++) {
        var td = tds.item(i).textContent = solvedNums[i];
    }
}

function setEditableAndRegions() {
    tds = document.getElementsByTagName("td");
    var len = tds.length;
    for (var i = 0; i < len; i++) {
        var td = tds.item(i);
        td.setAttribute("contenteditable", "true");
        var x = td.getAttribute("data-x");
        var y = td.getAttribute("data-y");
        if (x < 3 && y < 3)
            td.setAttribute("data-region", "0");
        else if ((x > 2 && x < 6) && y < 3)
            td.setAttribute("data-region", "1");
        else if (x > 5 && y < 3)
            td.setAttribute("data-region", "2");
        else if (x < 3 && (y > 2 && y < 5))
            td.setAttribute("data-region", "3");
        else if ((x > 2 && x < 6) && (y > 2 && y < 5))
    ...