Text typing effect in javascript.

Learn how to create the text typing effect in javascript.

In text typing effect whole text is typed character by character at the the specified speed.

I have already created this typing effect in react, but today I will be doing it in vanilla javascript.

By building this you will learn.

• HTML:- Creating simple layout.
• CSS:- Design textarea and select box.
• Javascript:- Recursive functions and Set timeout function.

The is an extremely simple component from the layout and design perspective, but it is a good exercise to learn how to update DOM elements at given intervals.

I have broken the development in three different parts.

1. Create the layout
2. Design with CSS.
3. Adding typing effect.

I guess you have a good idea about what are going to build, so lets start building it.

Creating the layout with HTML

In our layout we need three components.

1. Textarea which will get the input text which we will be typing.
2. A select box to choose the speed and a type button to start typing.
3. An empty area where the text will be typed.

So I have created three different section in the layout for each of these elements and wrapped them inside main tag.

<main>
    <!-- Receives Text -->
    <textarea id="text"></textarea>

    <!-- Speed Selector and Button -->
    <div class="fields">
        <div class="fields-group">
            <label for="speed">Select Speed</label>
            <select id="type-speed" name="speed">
                <option value="100">100</option>
                <option value="200">200</option>
                <option value="300" selected>300</option>
                <option value="400">400</option>
                <option value="500">500</option>
                <option value="600">600</option>
                <option value="700">700</option>
                <option value="800">800</option>
                <option value="900">900</option>
                <option value="1000">1000</option>
            </select>
        </div>
        <span id="start-typing-btn">Type</span>
    </div>

    <!-- Area where text will typed -->
    <div id="type-area"><span id="text-type"></span></span><span id="cursor"></span></div>
</main>

---

Styling with CSS.

I have used flexbox to align all the items.

There is a cursor inside the typing area which will be blinking to add the typing effect so I have added its animation as well.

main {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  max-width: 80%;
  margin: 0 auto;
}

/* Text area */
textarea {
  flex: 1 100%;
  margin-bottom: 30px;
  min-height: 9em;
  font-size: 2em;
  padding: 10px;
  border: 1px solid #607d8b;
  box-shadow: 0 0 3px;
}

/* Button and Speed Wrapper */
.fields{
    display: inline-flex;
    justify-content: space-between;
    flex: 1;
    align-items: center;
}

/* Speed Selector wrapper */
.fields-group{
     display: inline-flex;
    align-items: center;
    justify-content: space-between;

}

/* Speed selector */
label{
    text-align: center;
    font-size: 2em;
    margin-right: 20px;
}

select{
    font-size: 1.8em;
    cursor: pointer;
    border: 1px solid #8BC34A;
    padding: 10px 15px;
    background-color: #4CAF50;
    box-shadow: 0 0 3px;
    color: #fff;
}

/* Button */
#start-typing-btn {
  font-size: 1.8em;
  cursor: pointer;
  border: 1px solid red;
  padding: 10px 15px;
  background-color: #f44336;
  box-shadow: 0 0 3px;
  color: #fff;
  transition: all 0.2s ease;
}

#start-typing-btn:hover {
  color: #000;
}

/* Typing area */
#type-area {
  flex: 1 100%;
  min-height: 3em;
  font-size: 2em;
  padding: 10px;
  border: 1px solid #ff5722;
  box-shadow: 0 0 3px;
  margin-top: 25px;
}

/* Cursor */
#cursor {
  display: inline-block;
  width: 3px;
  height: 0.75em;
  background: red;
  position: relative;
  top: 1px;
  left: 6px;
  animation: blink 1s ease infinite;
}

@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

---

Add the text typing effect with javascript.

We will be starting the typing effect when the Type button is clicked.

And once the button is clicked will get the text that needs to be typed and speed and pass it to a function which will type the text character by character.

So lets assign a click event listener on the button and get the text and speed value. Also we will have to make sure that we clear the type area before typing the text.

//Type button
const btn = document.querySelector("#start-typing-btn");

//Type area
const typeArea = document.querySelector("#text-type");

btn.addEventListener("click", () => {
  // Text value
  const str = document.querySelector("#text").value;
  // Speed value
  let speed = document.querySelector("#type-speed").value;

  // Set the default speed to 250
  speed = speed ? Number(speed) : 250;

  // Empty the type area before starting to type again
  typeArea.innerHTML = "";

  // Start typing;
  type(str, speed);
});

Now what’s pending is the function which will type the characters in the type area. So lets create it.

const type = (str, speed) => {
  if (str === "") {
    //If we have typed everything then stop typing
    //By stopping the timer
    clearTimeout(interval);
  } else {
    //Keep typing each character
    var interval = setTimeout(() => {
      //Add the next character to the type area
      typeArea.innerHTML += str.substr(0, 1);

      //Call the function recursively
      //With the remaining text to be typed
      type(str.substr(1, str.length), speed);

    }, 1000 - speed);
  }
};

This is a recursive function which calls itself with the remaining string that needs to typed. In each call we check if we have typed everything or not.

If we have typed everything then stop the timer else call the timer which will add the next character after specified time and call itself again.

Defining variable with var keyword adds it in the global object so we can access it later to stop the timer.

String.substr(start, end) returns the character from the string between the start and end index. So str.substr(0, 1) returns the first character and str.substr(1, str.length) returns the remaining characters of the string.

1000-speed will type faster if the speed is more and slowly if the speed is less.

I hope 🙏🏻 you learned something useful today.