JavaScript Typewriter effect with source code

Learn how to create a JavaScript typewriter effect using html, CSS, JavaScript. Create an index.html file.

Sep 12, 2022 - 14:21 Updated: Oct 1, 2022 - 06:34

0 184

JavaScript typewriter screenshot

JavaScript Typewriter effect with source code

Table of content

About the JavaScript typewriter effect
Features
Script includes
Requirements
Step by step to create a typewriter effect
How to download and extract the source code

About the JavaScript typewriter effect

Learn how to create a typewriter effect using JavaScript, html and CSS. It gives it an effect like the one in the video below.The zipped source code file is provided below this article. View source code below.

Features

Type writer effect
Good interface
Easy code Documentation

Script Includes

JavaScript
HTML
CSS

Requirements

Browser (Chrome or any other browser).
Code Editor (Visual studio code, etc).

Step by step to create a javascript typewriter effect

Create a folder and save (to store created files).
Go to your code editor.
Create an index.html inside the folder we created earlier.

Copy the HTML codes below and paste it into the Index.html.

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
    <title>Typewriter Effect Using JavaScript</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
     <p id="disp"></p>     
      
     <script src="script.js"></script>

</body>
</html>

Then, create another CSS file named [style.css]

Copy the code below and paste it into the css file.

STYLE.CSS

body{
    display: flex;
    justify-content: center;
}
#disp{
    color: #000032;
    font-size: 30pt;
    padding: 30px;
    width: 50%;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow:1px 0px 10px #000032ce;
    padding:50px 200px;
}

We also create another file called [script.js].

Copy the JavaScript code below and paste it into the [script.js] file. This js code gives it the typewriter effect.

SCRIPT.JS

// JavaScript code

        var speed = 60;
        var num = 0;
        var i = document.getElementById('disp');
        var txt = `Visit Our Website For More :)                `;

        function demo(){
            if (num < txt.length) {
                i.innerHTML += txt.charAt(num);
                num++;
                setTimeout(demo, speed);
            }else{
                num = 0;
                i.innerHTML = txt.charAt(num);
                num++;
                setTimeout(demo, speed);
            }
        }
        demo();

After saving (ctrl + s) all the code, open your browser and run the index.html file or double click on the index.html file. You will see a screen like the image below. You can edit the effect speed by increasing or decreasing the speed in code.