Create a Dynamic Typing Effect with Random Quotes Using HTML, CSS, and JavaScript: A Step-by-Step Guide for Beginners

Adding dynamic elements to your website can significantly enhance user engagement and experience. One captivating feature you can incorporate is a typing effect that displays random quotes.

This guide will walk you through creating a simple yet effective typing effect using HTML, CSS, and JavaScript. By the end of this tutorial, you will have a deeper understanding of how to combine these technologies to create an interactive and visually appealing feature for your web pages.

Open a Text Editor

Use any text editor such as Notepad, Sublime Text, VS Code, etc.

Create a New HTML File

Save the file with a .html extension, for example, index.html.

HTML Document Structure

Copy and paste the basic HTML structure below into your file:

<!DOCTYPE html>

<html>
<head>
</head> 

<body> 
</body>

</html>

JavaScript

Add the CSS for Styling

Inside the tag, before the closing tag, add a

<style>
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

  body {
    background-color: transparent;
  }

  #text {
    font-family: 'Bebas Neue', cursive;
    margin: 150px 0 0 0;
    font-size: 48px; /* Adjust size as needed */
  }

  #text::after {
    content: '|';
    animation: blink 1s step-end infinite;
  }

  @keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
  }
</style>

JavaScript

Explanation:

@import: This imports the ‘Bebas Neue’ font from Google Fonts.

body: Sets the background color to transparent.

#text: Styles the text with the imported font, sets margin and font size.

#text::after: Adds a blinking cursor effect using CSS animations.

Add HTML Content

Inside the <body> tag, add a <h2> element with the ID text:

<body>
  <h2 id="text"></h2>
</body>

JavaScript

Explanation:

<h2 id=”text”>: Creates an empty heading element where the typing effect will be displayed.

JavaScript for Typing Effect

<script>
// Random quotes to display with typing effect
const randomQuotes = [
  '"Remember to focus on the moment"',
  '“Radiate boundless love towards the entire world…" - Buddha',
  '"Do the things you love"',
  '"Do everything with mindfulness"',
  '"Life is a road we must pave ourselves"'
]

let i = 0;
let txt = randomQuotes[Math.floor(Math.random() * randomQuotes.length)]; // Text to type
let speed = 100; // Speed of typing in milliseconds
let isDeleting = false;
let isCorrecting = false;
let finalTxt = 'PBRITTON.DEV'; // Final text

function typeWriter() {
  if (!isCorrecting) {
    if (i < txt.length) {
      document.getElementById("text").innerHTML = txt.substring(0, i + 1);
      i++;
      setTimeout(typeWriter, speed);
    } else if (i === txt.length) {
      setTimeout(deleteWriter, 500); // Wait for half a second before starting to delete
      isDeleting = true;
    }
  } else {
    if (i < finalTxt.length) {
      document.getElementById("text").innerHTML = finalTxt.substring(0, i + 1);
      i++;
      setTimeout(typeWriter, speed);
    } else if (i === finalTxt.length) {
      document.getElementById("text").innerHTML = '<a href="http://pbritton.dev" target="_blank">' + finalTxt + '</a>';
    }
  }
}

function deleteWriter() {
  if (i >= 0) {
    document.getElementById("text").innerHTML = txt.substring(0, i);
    i--;
    setTimeout(deleteWriter, speed);
  } else if (i < 0) {
    txt = finalTxt;
    i = 0;
    isDeleting = false;
    isCorrecting = true;
    setTimeout(typeWriter, speed);
  }
}

typeWriter(); // Start the typing animation
</script>

JavaScript

Explanation:

randomQuotes: An array of quotes to be displayed.

Variables:

i: Index to keep track of the current position in the string.

txt: Randomly selected quote.

speed: Typing speed.

isDeleting: Flag to indicate if the text is being deleted.

isCorrecting: Flag to indicate if the final text is being typed.

finalTxt: The final text to be displayed.

Functions:

typeWriter(): Handles typing the selected quote and the final text.

deleteWriter(): Handles deleting the selected quote before typing the final text.

Explanation:

The typeWriter function is called to start the typing animation.

Save and Open the File:

Save the changes to your index.html file.

That’s it! What are some of your favorite quotes?