Kevin Powell - Community•2mo ago

Stumped on typewriter effect

I have some JavaScript where I need to create a typewriter effect that types and then backspaces. I've gotten something to work on this codepen: https://codepen.io/vince1444/pen/xxNZKQE?editors=1111 The problem is, I need to do this for an array of words, and this is really stumping me. It seems like promises are key here, but I can't get my promises to work correctly. I have a work in progress codepen here: https://codepen.io/vince1444/pen/oNRbNGd?editors=1111 I'm able to print out the first letter in each word sequentially so far... Edit: I was able to get the all the words printing sequentially now, but I still need to implement backspacing...

6 Replies

vince•2mo ago

Ay! I think I figured it out: https://codepen.io/vince1444/pen/oNRbNGd?editors=1111 I'd love feedback on making this cleaner though -- all the times I've worked with promises in depth it's made my head spin and I feel like I'm no closer to learning how they really work Oh dang! It doesn't loop though 🫣

MarkBoots•2mo ago

here i did it recursively --edit: removed pen, see backup below

Joao•2mo ago

I don't have time to fix it right now, but I'm so close! edit: link probbly better: https://codepen.io/D10f/pen/vYwLEoK

D10f

CodePen

TypeWriter

...

vince•2mo ago

Omg great solutions guys, I still have so much to learn Love the OOP approach too!

MarkBoots•2mo ago

I removed the pen, so here a backup for future reference

const lines = [
  "Peace of Mind",
  "Living joyfully in your own cherished home",
  "Quality time with your loved one",
  "Staying healthy and comfortable",
  ...
];

const typeWriterElement = document.querySelector("#type-writer");
typeWriter(lines);

function typeWriter(lines = [], lineIndex = 0, charIndex = 0, direction = 1) {
  // let speed = 100;
  let speed = randomIntBetween(10, 100); 
  let pause = 1000;
  const currentLine = lines[lineIndex];
  
  typeWriterElement.innerText = currentLine.substring(0, charIndex);

  // if end of line, pause and set direction backwards
  if (charIndex === currentLine.length) {
    speed = pause; 
    direction = -1;
  // if back at beginning of line, set next line and direction forwards
  } else if (charIndex === 0 && direction === -1){
    lineIndex = (lineIndex + 1) % lines.length;
    direction = 1;
  }
  charIndex += direction;
  setTimeout(() => typeWriter(lines, lineIndex, charIndex, direction), speed);
}

function randomIntBetween(min, max) { 
  return Math.floor(Math.random() * (max - min + 1) + min);
}

const lines = [
  "Peace of Mind",
  "Living joyfully in your own cherished home",
  "Quality time with your loved one",
  "Staying healthy and comfortable",
  ...
];

const typeWriterElement = document.querySelector("#type-writer");
typeWriter(lines);

function typeWriter(lines = [], lineIndex = 0, charIndex = 0, direction = 1) {
  // let speed = 100;
  let speed = randomIntBetween(10, 100); 
  let pause = 1000;
  const currentLine = lines[lineIndex];
  
  typeWriterElement.innerText = currentLine.substring(0, charIndex);

  // if end of line, pause and set direction backwards
  if (charIndex === currentLine.length) {
    speed = pause; 
    direction = -1;
  // if back at beginning of line, set next line and direction forwards
  } else if (charIndex === 0 && direction === -1){
    lineIndex = (lineIndex + 1) % lines.length;
    direction = 1;
  }
  charIndex += direction;
  setTimeout(() => typeWriter(lines, lineIndex, charIndex, direction), speed);
}

function randomIntBetween(min, max) { 
  return Math.floor(Math.random() * (max - min + 1) + min);
}

vince•2mo ago

ty! already forked

Gaming

Programming

Stumped on typewriter effect