JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<!-- Enhanced version of http://jsfiddle.net/FL4XL/ -->
<h1>
    Console sample
</h1>
<p>
   This is unobtrusive version
</p>

CSS

#console {
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    height: 100px;
    overflow: auto;
    position:fixed;
    bottom:1px;
    right:1px;
    width:100%;
}

JavaScript

console = {
    _createConsole : function() {
        var pre = document.createElement('pre');
        pre.setAttribute('id', 'console');
        document.body.insertBefore(pre, document.body.lastChild);
        return pre;
    },
    log: function (message) {
        var pre = document.getElementById("console") || console._createConsole();
        pre.textContent += ['>', message, '\n'].join(' ');
        /* var objDiv = document.getElementById("your_div") */;
				pre.scrollTop = pre.scrollHeight;
    }
};
console.log("This is an unobtrusive version!");
console.log("Hello World!");
console.log("Test1");
console.log("Test2");
console.log("Test3");
console.log("Test4");
console.log("Test5");
console.log("Make it scrollable!");
//test with uncommenting the following
/*  window.setInterval( function(){
 console.log(new Date())
 },1000); */