JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<div id='screen'></div>

CSS

body {
  background-color: #1F1F1F;
}

#screen {
  margin: 10px;
  width: 80%;
  color: #1D730B;
  font-size: 20px;
  font-weight: bold;
}

JavaScript

var screen = document.getElementById('screen');

function clearScreen(screen) {
	screen.innerHTML = "";
}

function outPutText(text, letterTimeOutRange, callback, textArray, index) {
		var args = Array.prototype.slice.call(arguments, 0);

		textArray = textArray || text.split('');
    index = index || 0;
    
    letterTimeOutRange = typeof letterTimeOutRange === "function" ? 200 : letterTimeOutRange;
    callback = typeof args[1] === "function" ? args[1] : args[2];
  
 	 	var letterTimeOut = (Math.round(Math.random()) * letterTimeOutRange) + letterTimeOutRange,
    		nextIndex = index + 1;
    
    setTimeout(function() {
    		screen.innerHTML += textArray[index];
    
    		if (textArray.length > nextIndex) {
        	outPutText(text, letterTimeOutRange, callback, textArray, nextIndex);
        } else {
						callback && callback();
        }
    }, letterTimeOut);
}

function outPutTextSequence(textSequenceArray, screen, sequenceChangeTimeout, index) {
		clearScreen(screen);
    
		index = index || 0;
    
    var nextIndex = index + 1;
    
    sequenceChangeTimeout = sequenceChangeTimeout || 1000;
    
    setTimeout(function() {
    	outPutText(textSequenceArray[index], function() {
    		if (textSequenceArray.length > nextIndex) {
        		setTimeout(function() {
            	outPutTextSequence(textSequenceArray, screen, sequenceChangeTimeout, nextIndex);
            }, sequenceChangeTimeout);
        }
    	});
    }, sequenceChangeTimeout);
}

outPutTextSequence(["Wake up, Neo...", "The Matrix has you...", "Follow the white rabbit.", "Knock, knock, Neo."], screen);