HELLOWORLD.BAT - VanillaJS plain text editor

Inspired by this week's Codepen challenge to create something related to "HELLO WORLD" using Javascript, I decided to mimic an old-school DOS terminal.

If you missed the typing animation, click "Rerun" in the bottom right of the Codepen frame.

This uses Javascript to "type" the content, and CSS animation for the cursor.

The layout was made in a snap with CSS grid 😎

While not truly a full editor, you can type in your own content thanks to the humble contenteditable HTML attribute.

It would be neat to level this up by actually moving the cursor animation wherever you click, and perhaps provide some kind of fun functionality to create working menus 😊 Feel free to fork and make it happen!

Comments

[aRtoo]

this is like turbo c++ when I was in uni. gives me creeps.

[maisonsmd]

turbo pascal for me!

[Chris Salisbury]

Loved turbo pascal back in the day. Its the language I learned to program in. It's crazy how you could add little chunks of assembly right in the code.

[Nick Taylor]

Awesome! Love the retro DOS editor. 🔥

[Stephanie Eckles]

Thanks!

[Katie Nelson]

Looks ancient (before my time), but really nice Steph.

[Stephanie Eckles]

Lol, before my "programming" time, but in my lifetime 😉

[Vaibhav Khulbe]

Wow, this brings back memories of my school days when we used to code in Turbo C++. Great job recreating it!

[Stephanie Eckles]

Haha, thanks!

[Shaon Kabir]

I just inspired. I'm going to create one.. It's awesome.

[Stephanie Eckles]

Have fun, thanks!

[Stephanie Eckles]

Thanks!

[Andrew]

someone please make vim keybindings😂

[FoodBite]

Very nice

[maxdevjs]

Amazing, loving it :)

[Hieu Nguyen]

Man I am glad I wasn't born during that time. I would have been discouraged from becoming a programmer 😏 , but you really painted a good picture of where it all started. Thanks

[Stephanie Eckles]

Haha, glad you enjoyed it!