JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Eat, Sleep, Work</h2>
<ul>
</ul>

JavaScript

eat()
.then(sleep)
.then(work)
//sleep();
//work();

/******************************************************************
No need to change anything below this line
*******************************************************************/
function eat(){
    return print('eat');
}

function sleep(){
     return print('sleep');   
}

function work(){
     return print('work');   
}

function print (msg){
    function asyncPrint(msg){
        return new Promise(function(resolve, reject){
            randomAsync(function(){
                printToDOM(msg);
                resolve();
            });
        });
    }

    function printToDOM(msg){
        var li = document.createElement('li');
        li.innerHTML = msg;
        document.querySelector('ul').appendChild(li);
    }

    function randomAsync(callback){
        var timeout = Math.round(Math.random() * 2000);
        setTimeout(callback, timeout);
    }
    
    return asyncPrint(msg);   
}