JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<div id="output">--</div>
<button id="click">
Click Me!
</button>

JavaScript

function generate() {
var output, started, duration;

// Constants
duration = 1000;

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (new Date().getTime() - started > duration) {
        clearInterval(animationTimer);
    } else {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text(
            ''+
            Math.floor(Math.random() * 10)+
            Math.floor(Math.random() * 10)
        );
    }
}, 100);
}

$("#click").on("click", function(e){
	e.preventDefault();
  generate();
})