Typing Effect with JavaScript

April 20, 2025
1 Views
By Patrick Chidera

Want to add a cool typing animation to your site with no frameworks or libraries? Let’s build a mini project that types and deletes text like magic — using just HTML, CSS, and JavaScript.

🧱 Step 1: Setup the HTML

This will be our basic structure. You can paste it into your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Effect</title>
  <style>
    body {
      font-family: 'Courier New', monospace;
      background: #111;
      color: #00ffcc;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .typing-container {
      font-size: 1.5rem;
      border-right: 2px solid #00ffcc;
      white-space: nowrap;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="typing-container" id="typewriter"></div>

  <script src="script.js"></script>
</body>
</html>

🧠 Step 2: The JavaScript Magic

Now let’s bring it to life. Create a file named script.js and add the following code:

const texts = ['Hello World!', 'I ❤️ JavaScript', 'Typing like a hacker...'];
let count = 0;
let index = 0;
let currentText = '';
let isDeleting = false;
const speed = 150;

function type() {
  const target = document.getElementById('typewriter');

  if (count === texts.length) count = 0;
  currentText = texts[count];

  if (isDeleting) {
    target.textContent = currentText.slice(0, --index);
  } else {
    target.textContent = currentText.slice(0, ++index);
  }

  if (!isDeleting && index === currentText.length) {
    isDeleting = true;
    setTimeout(type, 1000); // pause before deleting
  } else if (isDeleting && index === 0) {
    isDeleting = false;
    count++;
    setTimeout(type, 500); // pause before typing next
  } else {
    setTimeout(type, isDeleting ? speed / 2 : speed);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  type();
});

✨ Bonus Tip: Add a Blinking Cursor

Want it to look even cooler? Add this to your CSS inside the <style> tag:

.typing-container {
  animation: blink-caret 0.7s step-end infinite;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #00ffcc; }
}

🚀 That's It!

You now have a fun, animated typing effect without any libraries! Play around by adding more phrases or tweaking the speed. Vanilla JavaScript still rocks! 😎

No comments yet

Be the first to comment on this post!