JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="item"></div>

<button id="flashonce">Flash Once</button>

<button id="flashtoggle">Flash</button>

CSS

#item {
    border: 10px solid red;
    height: 100px;
    margin: 50px;
    width: 100px;
}

#item.warm {
    background-color: orange;
}

#item.hot {
    background-color: red;
}

JavaScript

(function( $ ) {
    
    var count,
        flashInterval,
        $item = $( '#item' ),
        $onceButton = $( '#flashonce' ),
        $flashButton = $( '#flashtoggle' ),
        flash = function( state, numFlashes, delay ) {
            
            count = 0;
        
            var flashToggle = function() {
                count += 0.5;
                if ( numFlashes && count >= numFlashes ) {
                    clearInterval( flashInterval );
                }
                          
                $item.toggleClass( state );
            }      
  
            delay = delay || 200;
    
            flashInterval = setInterval( flashToggle, delay );
           
        }

        $onceButton.on( 'click', function() {
        
            if ( $item.hasClass( 'is-flashing' ) ) {
                $flashButton.trigger( 'click' );            
            }        
 
            flash( 'hot', 3 );
        });
    
        $flashButton.on( 'click', function() {
            var state = 'warm';
            
            if ( ! $item.hasClass( 'is-flashing' ) ) {
                flash( state );
            } else {
                $item.removeClass( state );
                clearInterval( flashInterval );
            }
                  
            $item.toggleClass( 'is-flashing' );
        });       


$item.on( 'nateisawesomeday', function() {
    console.log( 'Time to throw a party!' );
});
          
$onceButton.on( 'click', function() {
    $item.trigger( 'nateisawesomeday' );
});
         
    
})( jQuery );