JSFiddle - React, Tailwind, and code Playground

by speakman

HTML

<div id="console"></div>

CSS

* {
    font-family: sans-serif;
}

JavaScript

function Console(el) {
    var target = el;
    var n;

    this.delay = 1000;
    this.entries = [];

    var _this = this;

    for (n = 0; n < 6; n++) {
        var p = document.createElement("p");
        p.innerHTML = "&nbsp;";
        target.appendChild(p);
    }

    this.timer = null;
    this.putEntry = function() {
        if (_this.entries.length) {
            target.removeChild(target.firstElementChild);
            var p = document.createElement("p");
            p.innerHTML = _this.entries.shift();
            target.appendChild(p);
            p.style.webkitTransition = "opacity 0.5s ease-in-out";
            p.style.opacity = 0;
            setTimeout(function() {
                p.style.opacity = 1;
            }, 1);
            _this.timer = setTimeout(function() {
                _this.putEntry();
            }, _this.delay);
        } else {
            _this.timer = null;
            if (_this.onfinished) {
                _this.onfinished();
            }
            _this.onfinished = null;
        }
    };
}

Console.prototype.writeln = function(row) {
    this.entries.push(row);
    if (!this.timer) {
        this.putEntry();
    }
};

Console.prototype.setOnFinished = function(f) {
    if (!this.timer) {
        f();
    } else { 
        this.onfinished = f;
    }
};

c = new Console(document.getElementById("console"));
c.writeln("Test1");
c.writeln("Test2");
c.writeln("Test3");
c.writeln("Test4");
c.writeln("Test11");
c.writeln("Test12");
c.writeln("Test13");
c.writeln("Test14");
c.setOnFinished(function() {
    alert("Done!");
});