JSFiddle - React, Tailwind, and code Playground

by nate

HTML

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

<div id="add-buttons">
    <button>5</button>
    <button>10</button>
    <button>15</button>
</div>

CSS

#jackpot:before {
    content: 'Jackpot: '
}

#credits:before {
    content: 'Credits: '
}

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

button {
    font-size: 42px;
}

div {
    text-align: center;
}

JavaScript

var jackpot = document.getElementById( 'jackpot' );
var credits = document.getElementById( 'credits' );
var addButtons = document.getElementById( 'add-buttons' );

console.log( addButtons );

var totalCredits = 0;
credits.textContent = totalCredits;


// Basic event delegation
addButtons.onclick = function (event) {
    console.log( 'event target tag name:', event.target.tagName );
    console.log( 'click:', event.target.textContent );
    
    if ( event.target.tagName === 'BUTTON' ) {
        var button = event.target;
        
        var newTotalCredits = totalCredits + (button.textContent * 1);
        totalCredits = newTotalCredits;
        
        console.log('TOTAL CREDITS', totalCredits);
        
        goToNumber({
            element: credits,
            destinationNumber: totalCredits,
            duration: 500
        });  
    }        
}

var goToNumber = function ( options ) {
    
    var $element = $(options.element);

    clearTimeout( $element.data('animationTimeout') );

    // console.log( $element );

    // 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 (...