JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<span id="typing"></span>
<p id="result"></p>

JavaScript

const addTypingMovement = (word, target) => {
  const promises = [];
  const wordArray = [...word];
  const printTarget = document.querySelector(target);
  
  for(let i = 0; i < wordArray.length; i++) {    
    const p = new Promise(resolve => {
      setTimeout(() => {
        printTarget.textContent = printTarget.textContent + wordArray[i];
        resolve();
      }, i * 200)
    });    
    promises.push(p);
  }

  return promises;
}

const finishTitleCall = () => {
  document.querySelector('#result').textContent = 'Done.'
}

Promise.all(addTypingMovement('Hello World.', '#typing')).then(finishTitleCall);