JSFiddle - React, Tailwind, and code Playground

by timwienk

CSS

td {
    font-family: sans-serif;
    line-height: 40px;
    text-align: center;
    width: 40px;
}

JavaScript

window.addEvent('domready', function(){

    var width = 9, height = 8, delay = 20;

    var table = [],
        element;

    var tint = 210 / (width * height);

    challenge.addEvents({

        start: function(){
            element = new Element('table');

            for (var y = 0; y < height; ++y) {
                var row = new Element('tr'),
                    cells = [];

                for (var x = 0; x < width; ++x) {
                    var cell = new Element('td');
                    row.grab(cell);
                    cells.push(cell);
                }

                row.inject(element);
                table.push(cells);
            }

            element.inject(document.body);
        },

        set: function(x, y, value){
            var color = Math.max(0, 230 - Math.round(tint * value)).toString(16);
            if (color.length == 1) color = '0' + color;

            var element = table[y][x];
            element.set('text', value);
            element.setStyle('background-color', '#' + color + color + color);
            if (color < '6') element.setStyle('color', '#ffffff');
        }

    });

    challenge.start(width, height, delay);

});

var challenge = (function(){

    var exports = new Events();
    var data, direction;

    exports.start = function(width, height, delay){
        init(width || 1, height || 1);
        start(delay || 0);
    }

    function init(width, height){
        data = [];
        direction = 0;

        for (var i = 0; i < height; ++i){
            var row = [];

            for (var j = 0; j < width; ++j){
                row.push(null);
            }

            data.push(row);
        }
    }

    function start(delay){
        exports.fireEvent('start', [data]);

        var coordinates = {x: 0, y: 0},
            value = 1;

        do {
            set(coordinates.x, coordinates.y, value);
            exports.fireEvent('set', [coordinates.x, coordinates.y, value], value * delay);
           ...