Text auto-typing

by davidxmartins

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>David Martins - Graphic & Web Designer</title>
  <style>
    .animatedText {
      font-family: 'Arial', sans-serif;
      font-size: 18px;
      color: #333;
      margin: 20px;
    }
  </style>
</head>
<body>

<div class="animatedText"></div>

<script>
  const textArray = [
    "Hi, My name is David Martins,",
    "I'm a Graphic and Web Designer,",
    "Here you will find some of my work which includes,",
    "UI and UX Design, Brand and Identity Design,",
    "Web development and Illustration,",
    "I like to create Identity Systems that...",
    "well, let's not get too serious, shall we?",
    "I once designed a website for a cat. Don't ask.",
    "You know, cats have strong opinions about color schemes.",
    "Are you still reading this?",
    "Impressive! You must really like my story.",
    "You best go see the rest of the site.",
    "No?",
    "Well, since you're keen on reading, let me tell you some facts.",
    "Did you know that a group of flamingos is called a 'flamboyance'?",
    "Flamboyance! I wish I could name my design projects like that.",
    "Okay, seriously, go explore the site now.",
    "Why are you still here?",
    "I'm running out of random facts to share.",
    "Did you know that honey never spoils?",
    "Alright, I'm done. Seriously. Go check out the rest.",
    "Fine, let's continue. Did you know that...",
    // Add more strings as needed
  ];

  let typeJsText = document.querySelector(".animatedText");
  let stringIndex = 0;
  let charIndex = 0;
  let isTyping = true;

  function typeJs() {
    if (stringIndex < textArray.length) {
      const currentString = textArray[stringIndex];

      if (isTyping) {
        if (charIndex < currentString.length) {
          typeJsText.innerHTML += currentString.charAt(charIndex);
          charIndex++;
        } else {
          isTyping =...