JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<div id="terminal">
  
</div>

<pre id="query"></pre>

CSS

#terminal {
  background: white;
  height: 300px;
  width: 750px;    
  position: absolute;
  left: 25px;
  top: 25px;  
  overflow-y: scroll;
  font-family: "Courier New", monospace;
  font-size: 11pt;
  color: #6E6E6E;
  white-space: pre;
}

JavaScript

(function($t, $i, $m, $f, $c, $q, $clear) {

	var poll = setInterval(function() {
  	$t.textContent += $m.s.slice(0, Math.floor(Math.random() * $m.l)) + '\n';
  }, $f);
  
  $clear(poll, $c);
  
  $t.addEventListener("click", function(e) {
  	console.log(e);
  });

})(

  document.querySelector("#terminal"),
  
  0,
  
  (function() {
  	var l = 'abcdefghijklmnopqrstuvwxyz1234567890';
    return {
    	s: l,
      l: l.length
    };
  })(),
  
  10,
  
  3000,
  
  document.querySelector("#query"),
  
  function(fn, delay) {
  	setTimeout(function() {
    	clearInterval(fn);
    }, delay)
  }
  
)