<body>

  <h1 id="text"></h1>

</body>
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@700&display=swap');
body {
  background-color: black;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

#text {
  border-right: solid #40916c  3px;
  color:#dec9e9;
  font-family: 'Scheherazade New', serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px
}
const textDisplay = document.getElementById('text')
const phrases = ['Hello, my name is Shah Stavan.', 'I love to code.', 'I love to teach.']
let i = 0
let j = 0 
let currentPhrase = []
let isDeleting = false
let isEnd = false

function loop () {
  isEnd = false
  textDisplay.innerHTML = currentPhrase.join('')

  if (i < phrases.length) {

    if (!isDeleting && j <= phrases[i].length) {
      currentPhrase.push(phrases[i][j])
      j++
      textDisplay.innerHTML = currentPhrase.join('')
    }

    if(isDeleting && j <= phrases[i].length) {
      currentPhrase.pop(phrases[i][j])
      j--
      textDisplay.innerHTML = currentPhrase.join('')
    }

    if (j == phrases[i].length) {
      isEnd = true
      isDeleting = true
    }

    if (isDeleting && j === 0) {
      currentPhrase = []
      isDeleting = false
      i++
      if (i === phrases.length) {
        i = 0
      }
    }
  }
  const spedUp = Math.random() * (80 -50) + 50
  const normalSpeed = Math.random() * (100 -50) + 100
  const time = isEnd ? 2000 : isDeleting ? spedUp : normalSpeed
  setTimeout(loop, time)
}

loop()


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.