JSFiddle - React, Tailwind, and code Playground

by blparker

HTML

<div id="container"></div>

CSS

#container { position: relative; }
body { position: relative; }
.node { position: fixed; height: 30px; width: 30px; }
.node > img { display: none; }

JavaScript

var w = $(window).width() * 0.8,
    h = $(window).height() * 0.8,
    c = $('#container'),
    prev = c;

for(var i = 0; i < 10; i++) {
    var n = $('<div class="node" />').attr('data-level', (i + 1)).append('<img src="http://placekitten.com/30/30" />');
    
    n.on('click', clickHandler);
    
    var left = Math.floor(Math.random() * w),
        top = Math.floor(Math.random() * h);

    n.css({ top : top + 'px', left : left + 'px' }).appendTo(prev);
    
    prev = n;
    
    if(i === 9) {
        n.children('img').show();
    }
}

function clickHandler(e) {
    var self = $(this),
        level = parseInt(self.attr('data-level'));
    console.log("#### LEVEL = ", level);
    setTimeout(function() {
        //self.hide();
        self.children('img').show();        
    }, 1000 * level);
}