JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>

CSS

body {
    overflow: hidden;
    white-space: nowrap;
}

JavaScript

var $j = jQuery.noConflict();
var fb = new Firebase("https://coonrodorg.firebaseio.com/checkboxes/");

for (var x = 0; x < 100; x++) {
    for(var y = 0; y < 100; y++) {
        $j('<input />', {
            type: 'checkbox',
            'data-position': [x, y].join(',')
        }).appendTo(document.body);
    }
    $j('<br />').appendTo(document.body);
}

$j('input').on('click', function (e) {
    var el = $j(e.target);
    fb.child(el.data('position')).set(el.prop('checked'));
});

$j('input').on('mouseover', function (e) {
    $j(e.target).click()
});

fb.on('value', function (snapshot) {
    $j.each(snapshot.val(), function (key, value) {
        $j('input[data-position="' + key + '"]').prop('checked', value);
    });
});