Text Typing Animation Javascript Code and Tutorial

<p id="text">I am learning <strong id="changing-text">HTML</strong>.</p>

p{
  text-align:center;
}

const text = document.getElementById('changing-text');
const keywords = ['HTML', 'CSS', 'JavaScript', 'Python', 'Java', 'C++'];
let index = 0;

function typeText(keyword) {
  let i = 0;
  const interval = setInterval(() => {
    text.innerHTML = keyword.slice(0, i) + ' |';
    i++;
    if (i > keyword.length) {
      clearInterval(interval);
      setTimeout(() => {
        const cutInterval = setInterval(() => {
          text.innerHTML = text.innerHTML.slice(0, -1);
          if (text.innerHTML === '') {
            clearInterval(cutInterval);
            setTimeout(() => {
              index = (index + 1) % keywords.length;
              typeText(keywords[index]);
            }, 500);
          }
        }, 100);
      }, 500);
    }
  }, 100);
}

typeText(keywords[index]);