JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<button>add</button>

CSS

body { overflow: hidden; margin: 0px; padding: 0px;}
button { position: fixed; right: 10px; top: 20px; }
div {
height: 100px; margin-bottom: 1px;    
}

JavaScript

var oridiv = [];

$('body').height(window.innerHeight);
$('body').width(window.innerWidth);

$('button').on('click', function(){
    console.log('yes');
    $('<div></div>').hide().css('background-color', getRandomColor)
    .prependTo('body');
});

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function displayimg(){
    if ($('div:hidden').length) {
        oridiv.push( $('div:hidden').last()[0].outerHTML );
        $('div:hidden').last().slideDown();
    } else {
        if ($('div:visible').length) {
            var random = Math.floor( oridiv.length*Math.random());
            console.log(random);
            var elm =  $( oridiv[random] );
            elm.html('clone').hide().prependTo('body').slideDown();
            console.log('clone');
        }
    }
    setTimeout(displayimg,2000);
}

displayimg();