JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<section>
    <p>Click button to stop animation.</p>
    <button>STOP</button><br>
</section>

CSS

div {
    width: 50px;
    height: 50px;
    display: inline-block;
}

JavaScript

// Example of a simple animation

var intervalID = setInterval(showBoxes, 1000);

var colorIndex = 0; // to switch color

function showBoxes(){
    if (colorIndex % 2) {var color = "red"}
    else {var color = "black"}    
    $("<div>").css("background-color", color).appendTo("section");
    colorIndex += 1;
}

$("button").click(function(){
    clearInterval(intervalID);
});