How To Create Auto-Text Typing Effect JavaScript Project

Today, we’ll learn how to create an Auto-Text Typing Effect JavaScript, a simple yet eye-catching project that gives your web pages a dynamic and modern feel.

Whether you’re a beginner or a front-end developer enthusiast, this tutorial will guide you through each step. Plus, the GitHub source code is attached below for easy reference and practice.

Auto-Text Typing Effect JavaScript Project

How to create an Auto-Text Typing effect JavaScript:

We have created an UpdateText function in the Script.js file to create the auto-text typing effect.

HTML PART:

The HTML part of this project is very simple and easy to understand. We’ve created a single <div> element that will be displayed in the browser. This div acts as a container where our text will appear as if it’s being typed automatically, just like a real typing animation.

Our main goal is to insert dynamic text inside this div using JavaScript. The JavaScript code will control what text appears, how fast it types, and how it loops or resets, giving that cool, auto-typing effect.

<body>
    <div class="container">
        //auto-text will get inserted here
    </div>
    <script src="script.js"></script>
</body>

CSS PART:

Before we jump into the JavaScript logic, let’s style our project a bit. The CSS part helps us make the typing text look centered, clean, and visually appealing.

Firstly, we define the height and width of the container that will hold our auto-text. We also center it using Flexbox and apply some basic font styling to make it stand out.

Here’s the CSS code:

body{
    display: flex;
    justify-content: center;
    height: 50vh;
    align-items: center;
    background-color: rgb(255, 255, 255);
}

JavaScript PART:

This is the main part of this project; we are creating an update function that will update or add the text inside the container at regular intervals.

Intuition of Update() function:

In updateText(), we have an array having texts that we want to show. By using setTimeOut(), we are accessing each index of the array and showing every character of the current index word at one interval. Once the index reaches the end of the array, we have to repeat the array elements from the start hence we are again setting the index to the initial place so that the loop never ends.

const containerEl = document.querySelector(".container")
const careers = ["Developer", "Youtube", "Freelancer", "Investor"];

let index = 0;
let characterIndex=0;

function updateText() {
    containerEl.innerHTML = ` <h1>I am ${careers[index].slice(0,characterIndex)}</h1>`;
   
    if(characterIndex===careers[index].length){
        index++;
        characterIndex=0;
    }
    if(index>=careers.length){
        index=0;
    }
    characterIndex++;
    setTimeout(updateText,200);
}
updateText()

Source Code Link: (Link)

Conclusion: Auto Typing Text Effect JavaScript

Creating an Auto-Text Typing Effect JavaScript is a fun and beginner-friendly project that adds a dynamic touch to any website. With just a simple HTML structure, basic CSS styling, and a few lines of JavaScript, you can achieve an impressive typewriter-like animation.

This effect is commonly used in landing pages, portfolios, headers, and hero sections to grab attention instantly. It’s also a great way to practice DOM manipulation and timing functions in JavaScript.

Refer to this link for more coding projects: Projects

How to Create Auto-Text Typing Effect JavaScript Project