TerminalTyper

TerminalTyper.js

const BLOCK_CHAR = '█';
let blockChar = `${BLOCK_CHAR}`;

function updateTerminal(content) {
  document.getElementById('terminal').innerHTML = content;
}

function flickerBlock() {
  if (blockChar.length > 0) {
    blockChar = "";
  } else {
    blockChar = `${BLOCK_CHAR}`;
  }
}

function writeText(text, content, count) {
  if (content.lastIndexOf(BLOCK_CHAR) > 0) {
    content = content.substring(0, content.lastIndexOf(BLOCK_CHAR));
  }
  content += text[count] + blockChar;
  updateTerminal(content);
  window.setTimeout(() => {
    flickerBlock();
    writeText(text, content, count + 1);
  }, 50);
}

document.addEventListener("DOMContentLoaded", function(event) {
  const text = document.getElementById('someText').value;
  writeText(text, "", 0);
});