# Typewriter Effect : Frontend Coding Exercise

**URL:** <https://forum.kirupa.com/t/typewriter-effect-frontend-coding-exercise/683598>\
**Category:** programming\
**Created:** [October 6, 2026, 8:32pm UTC](https://forum.kirupa.com/t/typewriter-effect-frontend-coding-exercise/683598 "2026-10-06T20:32:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 6, 2026, 8:32pm UTC](https://forum.kirupa.com/t/typewriter-effect-frontend-coding-exercise/683598/1 "2026-10-06T20:32:13Z")

</div>

This is where you can share your code for solving the [Typewriter Effect](https://www.kirupa.com/codingexercises/typewriter_effect.htm) exercise 🙂

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [October 6, 2026, 10:20pm UTC](https://forum.kirupa.com/t/typewriter-effect-frontend-coding-exercise/683598/2 "2026-10-06T22:20:18Z")

</div>

This is always a fun one for teaching beginners. I usually start with `setTimeout` and then show how `requestAnimationFrame` can make it smoother.

```auto
function typewriterEffect(element, text, i = 0) {
  if (i < text.length) {
    element.textContent += text.charAt(i);
    setTimeout(() => typewriterEffect(element, text, i + 1), 100);
  }
}

// Example usage:
// const myElement = document.getElementById('my-typewriter-div');
// typewriterEffect(myElement, 'Hello, world!');

```