How to Easily Create a Text Typewriter Effect with JavaScript

In today's video I'll show you how to create a "text typing" effect in JavaScript - in other words, how to make text appear as if it's being "typed" by a human as it's rendered on the page 😎
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript

[@bedtimehorrorstoryyoutube]

Simple and effective 😀 Thank you!

[@LFG04]

this is a very easy and good way of doing a typewriter effect, good job and thanks!

[@davidpainzug5810]

thank you so much bro

[@danushadhaamarasekera7215]

Thanks brother, may god bless you

thank you bro

[@kibels894]

Did you notice the bug at the end where there's invalid unicode put to the screen for a second until the full unicode character has been output? Making it work smoothly with unicode would be an interesting video.

[@MichaelShingo]

I'm curious, is there is an advantage to doing this recursively vs. iteratively?

[@istbl3480]

Thanks!

[@dcode-software]

You're welcome! Thank you for the Super Thanks 💪 appreciate it

[@suelingsusu1339]

Nice!!🌹👌👍🙏🖖🖖🖖

[@neontuts5637]

Awesome! That's a cool trick to create a text-typing effect. Thanks for sharing. How to add a cursor at the end and after text typing is completed that cursor should blink.

[@spkim0921]

.text{
overflow: hidden;
border-right: .05em solid orange;
white-space: nowrap;
animation:
blink-caret .75s step-end infinite;
}
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}

[@mariners_platter]

where can I get 'Lexend' font? Is that a Google Font?

[@BMikel]

Cute. What if I want this effect to loop endlessly?

[@Imam.Mehdi_]

Just add typeTypeEffect(element,text) in if(text ===length-1)

[@frankdrolet9439]

Love your tutorials, you should do more advanced front-end stuff

[@lewisli3672]

dope

[@oladitiabiodun]

Please how can I make the text infinitely repeat

[@hiboktalampak1473]

i use opera gx. every time i type in there, there is this clacking sound. i like it. how to do that with js?

[@MichaelShingo]

Add a keyboard event listener and have it trigger a sound. Tone.js is a good library to play sounds with javascript.