JSFiddle - React, Tailwind, and code Playground

by Alon Rotem

HTML

<button onclick="activateTypewriter()">Typewriter - 1 row</button>
<button onclick="activateTypewriterAllRows()">Typewriter - all rows</button>
<div id="typewriter">
    <span class="typewritertexts" style="display:none">
        <span>Независими рецензии на ръкописи</span>
        <span>Редактиране на ръкописи</span>
        <span>Коректури на ръкописи</span>
    </span>
    <span id="textcontent"></span>
    <span class="cursor">|</span>
</div>

CSS

.cursor{
        animation:blinkingText 1.0s infinite;
    }
    @keyframes blinkingText{
        0%{     color: red;    }
        49%{    color: red; }
        60%{    color: transparent; }
        99%{    color:transparent;  }
        100%{   color: red;    }
    }

JavaScript

(function() {
  //activateTypewriter();
  //activateTypewriterAllRows();
})();

//print the text
//if there are more texts- <br>
//if there are no more texts - pause - then delete this, and others


function activateTypewriter()
{
  var texts = document
    .getElementById("typewriter")
    .getElementsByClassName("typewritertexts")[0]
    .getElementsByTagName("span");

  var text=0;
  var char=0;
  var wait = 3000;
  var intervalwait = 0;
  var speed = 35;
  setInterval(function(){
    var curtext = texts[text].innerHTML;
    //writing
    if(char < curtext.length)
    {
      document.getElementById("textcontent").innerHTML += curtext[char];
      char++;
    }
    else
    {


      //pausing
      if(intervalwait <= wait)
      {
        intervalwait += speed;
      }
      else
      {
        var typed = document.getElementById("textcontent").innerHTML;
        if(typed.length > 0)
          document.getElementById("textcontent").innerHTML = typed.substr(0, typed.length-1);
        else
        {
          intervalwait = 0;
          document.getElementById("textcontent").innerHTML = "";
          text++;
          if(text>= texts.length)
          {
            text = 0;
          }
          char = 0;
        }
      }
    }
  }, speed);
}

function activateTypewriterAllRows()
{
  var texts = document
    .getElementById("typewriter")
    .getElementsByClassName("typewritertexts")[0]
    .getElementsByTagName("span");

  var text=0;
  var char=0;
  var wait = 2000;
  var intervalwait = 0;
  var speed = 35;
  var prewait = 0;
  
  setInterval(function(){
    var curtext = texts[text].innerHTML;
    //writing
    if((char < curtext.length) || (prewait <= wait))
    {
    	if(prewait <= wait)
      {
      	console.log("prewait...");
      	prewait += speed;
      }
      else if (char < curtext.length)
      {
        document.getElementById("textcontent").innerHTML += curtext[char];
        console.log("writing...");
        char++;
      }
    }
   ...