Stop loop in typewriter effect using JS

Question

I am so close to the perfect typewriter effect for my website - mostly thanks to the support of your fantastic input here! What I'm looking for is a slight variation of the typewriter effect below: To have the last line of text remain on the screen rather than being erased (but not, as instructed in another post, the ENTIRE text, only the LAST LINE).

So ideally, the first line would build up, then get erased, then the second one would build up, then get erased as well, and then, finally, the third one would build up and remain on screen (while the cursor still continues to blink). If you could help me figure out this modification, I'd really be eternally grateful! Thank you a million in advance!

PS: If there is any chance to add a DELAY as well so the very first line starts building up after eg 5 seconds (in which only the cursor blinks), this would be the cherry on the icing! :-)

PPS: Here's the link to the original code :

consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','lightblue']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
  waiting = true;
  target.innerHTML = words[0].substring(0, letterCount)
  window.setTimeout(function() {
    var usedColor = colors.shift();
    colors.push(usedColor);
    var usedWord = words.shift();
    words.push(usedWord);
    x = 1;
    target.setAttribute('style', 'color:' + colors[0])
    letterCount += x;
    waiting = false;
  }, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
  waiting = true;
  window.setTimeout(function() {
    x = -1;
    letterCount += x;
    waiting = false;
  }, 1000)
} else if (waiting === false) {
  target.innerHTML = words[0].substring(0, letterCount)
  letterCount += x;
}
}, 120)
  window.setInterval(function() {
if (visible === true) {
  con.className = 'console-underscore hidden'
  visible = false;

} else {
  con.className = 'console-underscore'

  visible = true;
}
}, 400)
}

Answer 1

Here's my take on it:

// function([string1, string2], target id, [color1,color2], initial pause, final pause)    
 consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','lightblue'], 5000, 500000);

function consoleText(words, id, colors, initialPause, finalPause) {
  if (colors === undefined) colors = ['#fff'];
  var visible = true;
  var con = document.getElementById('console');
  var letterCount = 1;
  var x = 1;
  var initialCount = 0;
  var waiting = false;
  var target = document.getElementById(id);
  var justStarted = true;
  target.setAttribute('style', 'color:' + colors[0]);
  window.setInterval(function() {
    if(initialCount < initialPause){
      initialCount += 120;
    } else if (letterCount === 0 && waiting === false) {
      waiting = true;
      target.innerHTML = words[0].substring(0, letterCount);
      window.setTimeout(function() {
        var usedColor = colors.shift();
        var usedWord = words.shift();
        x = 1;
        target.setAttribute('style', 'color:' + colors[0]);
        letterCount += x;
        waiting = false;
      }, 1000);
    } else if (letterCount === words[0].length + 1 && waiting === false) {
      waiting = true;
      window.setTimeout(function() {
        x = -1;
        letterCount += x;
        waiting = false;
      }, words.length === 1 ? finalPause : 1000);
    } else if (waiting === false) {
      target.innerHTML = words[0].substring(0, letterCount);
      letterCount += x;
    }
  }, 120);
  window.setInterval(function() {
    if (visible === true) {
      con.className = 'console-underscore hidden';
      visible = false;

    } else {
      con.className = 'console-underscore';

      visible = true;
    }
  }, 400);
}