JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<script src="http://darcyclarke.me/dev/watch/jquery.watch.js"></script>
<a href="#" class="css">Animate CSS</a> |
<a href="#" class="attr">Change Attribute</a> |
<a href="#" class="reset">Reset</a>

<div></div>

CSS

div {
    width: 100px;
    height: 100px;
    background: blue;
}

JavaScript

jQuery(function($){
    
    var $div = $('div');
    
    // Watch width and height property changes
    $div.watch('width height', function(){
        var $el = $(this);
        
        // While changing make green
        $el.css('background', 'green');
        
        // If past a certain point, change again
        if(parseInt($el.css('width')) >= 200){
            $el.css('background', 'purple');   
        }
    
    // Watch id attribute changes
    }).watch('id', function(){
        $(this).css('background', 'orange');
   });
    
    $('.css').on('click', function(){
        $div.animate({'width':'200px', 'height':'200px'});
    });
    $('.attr').on('click', function(){
        $div.attr('id', 'box');
    });
    $('.reset').on('click', function(){
        window.location.reload();
    });
});