Typewriter Effect Demo

I finally worked out how setInterval works and why it doesn’t play well with for loops. After a few false starts, this was the first time I actually sat down and wrote a function out in pseudocode before starting on the js.

Please feel free to reuse, remix, borrow, or steal! (Within the bounds of the MIT license, as it’s hosted on CodePen).

Comments, criticism, and suggestions are also welcome!



What if you just used an animated .gif graphic for the blinking cursor? That way, you don’t have to control it’s blink in your JS.

Really like this! Well done. I just recently started learning Javascript, so every new powerfull thing I see it can do, inspires me to study more. This one is definitly going in my try-and-play-with-it-later folder :slight_smile: Thanks for sharing!

Yeah, that’d have the advantage that you could set a blink rate that wasn’t an exact number of clockTicks, though it’d also be less customizable on the fly.

I assume there are also ways you could do it with pure CSS, too, though I haven’t yet learned how.

Glad you liked it, and good luck with the studies! The things you can do with JavaScript these days really are pretty incredible, especially when you factor in Node on the back end (I haven’t even started learning that yet!) :slight_smile: