<div id="type"></div>
		#type {
		  font-size: 2rem;
		  padding: 10px;
		  background: #f9f9f9;
		  margin: 2rem;
		  display: table;
		  min-width: 1rem;
		  min-height: 2rem;
		}
const typeText = [
  "Abraham Lincoln",
  "George Washington",
  "Ronald Reagan",
  "John F Kennedy"
];
const myElement = document.getElementById("type");
var pos = 0;
var counter = 0;
var increment = 1;



// onePresidentSplit.forEach((element) => {


var onePresidentSplit = typeText[counter].split("");
for (let step = 0; step < onePresidentSplit.length; step++) {
  function addString() {
    myElement.innerHTML = myElement.innerHTML + onePresidentSplit[pos];    
    pos += increment;       
  }
  setTimeout(addString, step * 100);
}

function deleteString() {
  if (pos === onePresidentSplit.length) {
    console.log(pos);
    for (let step = 0; step < onePresidentSplit.length; step++) {
      function stringDelay() {
        myElement.innerHTML = myElement.innerHTML - onePresidentSplit[pos];   
        pos -= increment;       
      }
      setTimeout(stringDelay, step * 100);
    }
  }  
}
setTimeout(deleteString, onePresidentSplit.length*110);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.