JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<button id="click">click</button><button id="strobe">Strobe lights!</button>
<div id="container">
    <div class="temp">Hello</div>
</div>

CSS

div {
    margin: 20px;
    padding: 20px;
    background-color: orange;
}
#container {
    background-color: green;
}

JavaScript

var struc = function(){
    return $('<div class="temp">Yoyo!</div>').hide();
};

$('body').on('click', '.temp', function(){
    $(this).toggle('slow', function(){
        $(this).remove();
    });
});
$('#click').on('click', function(){
    $this = struc();
    $('#container').append($this);
    $this.show('slow');
});

var si = null;
var color = ['white', 'black'];
var i = 0;
$('#strobe').on('click', function(){
    if(si == null){
        si = setInterval(function(){
            $('.temp').css('background-color', color[i]);
            i = (i + 1) % 2;
        }, 100);
    }else{
        clearInterval(si);
        $('.temp').css('background-color', 'orange');
        si = null;
    }
});