JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="jackpot" class="number">50</div>
<div id="credits" class="number">0</div>

CSS

.number {
    font-family: Garamond, sans-serif;
    font-size: 144px;
    margin: 50px;
    text-align: center;
}

JavaScript

var jackpot = document.getElementById( 'jackpot' );
var credits = document.getElementById( 'credits' );

var goToNumber = function ( options ) {
    console.log( 'going from number ' + options.initialNumber + ' to ' + options.destinationNumber );
    console.log( 'options', options );
    var modifier;
    
    if ( ! options.initialNumber ) {
        options.initialNumber = options.element.textContent * 1;             
    }
    
    // Set a default value for delay if one is not given
    var delay = options.delay || 10;
    
    if ( options.duration ) {
        delay = options.duration / Math.abs( options.destinationNumber - options.initialNumber ) - 1;
    }
    console.log( 'delay', delay );
    
    // Set the callback function to an empty function if none is passed in
    var callback = options.callback || function() {};
    
    // Make sure that callback really is a function
    if ( typeof callback !== 'function' ) {
        callback = function() {};
    }

    if ( options.initialNumber < options.destinationNumber ) {
        modifier = 1;
    } else if ( options.initialNumber > options.destinationNumber ) {
        modifier = -1;
    } else if ( options.initialNumber === options.destinationNumber ) {
        callback();
        return;
    }
    
    var i = options.initialNumber;
    var iterateNumber = function () {
        
        options.element.textContent = i;
        
        if ( i === options.destinationNumber ) {
            callback();
            return;
        }
        
        i += modifier;
        
        setTimeout( iterateNumber, delay );
    };
    
    iterateNumber();
     
};

console.log( 'let\'s start animating the jackpot count' );
// goToNumber( jackpot, 100, 0, function() { console.log( 'the jackpot is finished' ); } );

goToNumber({
    element: jackpot,
    // initialNumber: 100,
    destinationNumber: 0,
    duration: 5000,
    // delay: 100,
    callback: function() {
        console.log( 'jackpot is done' );
   ...