0

I am trying to put this typewriting effect on my website. I use Brackets as code editor and in its live preview the code simply isn't running. Tested a few other ways to do this effect but nothing seems to work on my live preview, only on codepen. Can someone help?

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

const textArray = ["hard.", "fun.", "a journey.", "LIFE!"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += 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.textContent = 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() { // On DOM Load initiate the effect
  if (textArray.length) setTimeout(type, newTextDelay + 250);
});
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000;
  color: #eee;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container p {
  font-size: 3rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
}

.container p span.typed-text {
  font-weight: normal;
  color: #dd7732;
}

.container p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}

.container p span.cursor.typing {
  animation: none;
}

@keyframes blink {
  0% {
    background-color: #ccc;
  }
  49% {
    background-color: #ccc;
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
  100% {
    background-color: #ccc;
  }
}
<div class="container">
  <h1>
    <p>Coding is <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
  </h1>
</div>
Sean
  • 6,873
  • 4
  • 21
  • 46
  • It also works on SO. Does your version of Brackets support the ES6 keywords of `const` and `let`? If you replace those with `var` does it work? – Sean Mar 16 '20 at 20:30
  • Yes, it supports. But even if I replace it with `var`, it doesn't work. –  Mar 16 '20 at 20:34
  • It seems to be an error with Brackets, then—not your code. – Sean Mar 16 '20 at 20:35
  • That's really odd. Other animation effects I've done using JS seemed to work, except for this one. Brackets is recognizing all of the keywords. –  Mar 16 '20 at 20:38

0 Answers0