index.js

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["ease", "control", "creativity", "Cradex"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    if (textArray[textArrayIndex] === "Cradex") {
      typedTextSpan.innerHTML += `<i><b>${textArray[textArrayIndex].charAt(charIndex)}</i></b>`;
    } else {
      typedTextSpan.innerHTML += textArray[textArrayIndex].charAt(charIndex);
    }
    charIndex++;
    setTimeout(type, typingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
  	setTimeout(erase, newTextDelay);
  }
}

function erase() {
	if (charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.innerHTML = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if(textArray.length) setTimeout(type, newTextDelay + 50);
});



var pointElement = document.querySelectorAll('.point');

pointElement.forEach(function(element) {
  element.addEventListener('mouseover', function() {
    document.querySelector('.editor-image').classList.add('hovered');
  });

  element.addEventListener('mouseout', function() {
    document.querySelector('.editor-image').classList.remove('hovered');
  });
});