JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div id="log"></div>

CSS

#log {
    border:1px solid darkgrey;
}

.old {
    opacity:0;
    transition:opacity 1s;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
}

JavaScript

var max = 5;
var log = document.querySelector("#log");

function logIt(thing) {
    var text = document.createTextNode(thing);
    var node = document.createElement("div");
    node.appendChild(text);

    var toRemove = Array.prototype.slice.call(log.childNodes, max - 1); // make an array of children
    toRemove.forEach(function (el) {
        el.className += "old";
        setTimeout(function () {
            log.removeChild(el);
        }, 1000);
    });
    log.insertBefore(node, log.firstChild);

    setTimeout(logIt, 1000, "some text - " + Math.random());
}

logIt("start of logging");