JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<h1>
Hello Javascript
</h1>
<p>
Basic website - with Console.log output added at top
</p>

CSS

#console {
  border-button: 1px solid #ccc;
  background-color: #eee;
  height: 5em;
  overflow: auto;
}

JavaScript

console = {
	_createConsole : function() {
  	var pre =
    document.createElement('pre');
    pre.setAttribute('id', 'console');
    document.body.insertBefore(pre, document.body.firstChild);
    return pre;
  },
  log: function (message) {
  	var pre = 
    document.getElementById("console") ||
    console._createConsole();
    pre.textContent += ['>', message, '\n'].join(' ');
  }
};
console.log("This is an html version of console.log (scrollable)");
console.log("Line 2");
console.log("Line 3");
console.log("Line 4");
console.log("Line 5");
console.log("Last Line ");