JSFiddle - React, Tailwind, and code Playground

by liormb

HTML

<div class="element">
    <p>I am an element</p>
</div>

CSS

.element p:first-child {
    background: orange;
    color: white;
    padding: 10px;
    text-align: center;
}
.alert {
    text-decoration: underline;
    color: red;
}
.notice {
    color: green;
}

JavaScript

var fetching = function (text) {
    return $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: {text: text},
        cache: false,
        success: function(json){
            $('.element').append('<p>' + text + ' Fetching... succeessful!</p>');
        }
    });
};
var timeOut = function () {
    return setTimeout(function () {
        $('.element').append('<p class="notice">Time has passed...!</p>');
    }, 2000);
};
var obj = [];
var fetched = fetching('1');

fetched.then(function () {
    return fetching('2').then(function () { 
        obj.push('Lior Elrom');
        return '5 Horizon Rd #1101, Fort Lee, NJ 07024';
    });
}).then(function (address) {
    return fetching('3').then(function () {
        obj.push(address);
        return '[email protected]';
    });
}).then(function (email) {
    obj.push(email);
    $('.element').append('<p class="alert">DONE!</p>');
    console.dir(obj);
});