JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<a>Lundagin mo Beybeh!</a>
<div></div>

CSS

html,body { font-family:calibri; font-size:12pt; padding:10px; } 

a {
    margin:0;
    padding:12px 20px;
    border:1px solid rgba(50,100,255,.5);
    color:rgba(50,100,255,.7);
    background:rgba(50,100,255,.1);
    border-radius:4px;
    display:inline-block;
    cursor:pointer;
}

a:hover { background:rgba(50,100,255,.45); color:white; }

div {
    margin:10px 0;
    padding:20px;
    border:1px solid rgba(50,100,255,.5);
    border-radius:4px;
}

p {
    color:rgba(50,255,100,.9);
}

p.error {
    color:rgba(255,50,100,.7);
}

JavaScript

var BOSS = {};

(function ($) {
    
    $(function () {
        
        var button = $('a'),
            content = $('div')
            ;
        
        button.on('click', function (e) {
            
            BOSS.getData()
                .success(function (m) {
                    content.append(m);
                })
                .error(function (x,s,e) {
                    content.append('<p class="error">AJAX is already running.</p>');
                })
                ;            
        })        
    });
    
    // closure
    (function () {
        
        var isAvailable = true;
        
        BOSS.getData = function () {
            
            if (isAvailable) {
                
                isAvailable = false;
                return $.ajax({                    
                    url : '/echo/html/',
                    type: 'POST',
                    data : {
                        html : '<p>Successful AJAX!</p>',
                        delay : 3                        
                    }
                }).complete(function () {
                    
                    isAvailable = true;
                });
            }
            
            return $.ajax().abort();            
        };        
        
    })();
    
    
    
})(jQuery);