JSFiddle - React, Tailwind, and code Playground

by kustosz

HTML

<script src="http://lunarlogic.github.io/dolly.js/javascripts/dolly.js"></script>
<body></body>

CSS

table, th, td {
    border: 5px solid white;
    padding: 0;
}
td:nth-child(1) {
    width: 20px;
}
td:nth-child(2) {
    width: 30px;
}
td:nth-child(3) {
    width: 40px;
}
td:nth-child(4) {
    width: 50px;
}
td:nth-child(5) {
    width: 60px;
}
td:nth-child(5) td {
    width: 60px;
}
tr:nth-child(1) td {
    height: 20px;
}
tr:nth-child(2) td {
    height: 30px;
}
tr:nth-child(3) td {
    height: 40px;
}
tr:nth-child(4) td {
    height: 50px;
}
tr:nth-child(5) td {
    height: 60px;
}
table {
    border-collapse: collapse;
}

JavaScript

var tableController = {
    onClone: function (el, cloneX, cloneY) {
        var currentCell = $(el),
            currentRow = currentCell.parent(),
            index = currentCell.index(),
            nextCellMethod = cloneX > 0 ? "next" : "prev",
            nextRowMethod = cloneY > 0 ? "next" : "prev",
            amountX = Math.abs(cloneX),
            amountY = Math.abs(cloneY);

        for (var row = currentRow; amountY >= 0; row = row[nextRowMethod](), amountY--) {
            var amX = amountX;
            for (var cell = row.find('td').eq(index); amX >= 0; cell = cell[nextCellMethod](), amX--) {
                cell.css({
                    "background-color": currentCell.css("background-color")
                });
            }
        }
    },

    setRandomColors: function () {
        var rand = function () {
            return Math.floor(Math.random() * 360);
        };

        this.element.find("tr").each(function () {
            $(this).find("td").each(function () {
                $(this).css({
                    "background-color": 'hsl(' + rand() + ', 20%, 50%)'
                });
            });
        });
    },

    render: function () {
        var self = this;

        this.element.html("");

        for (var i = 0; i < 5; i++) {
            var row = $("<tr></tr>");
            for (var j = 0; j < 5; j++) {
                row.append($("<td>&nbsp;</td>"));
            }
            this.element.append(row);
        }

        $("td").dolly({
            cloned: function (event, ui) {
                self.onClone(this, ui.cloneX, ui.cloneY);
            }
        });
        this.setRandomColors();
    }
};

tableController.element = $("<table></table>").appendTo("body");
tableController.render();