DEV Community

Cover image for HELLOWORLD.BAT - VanillaJS plain text editor
Stephanie Eckles
Stephanie Eckles

Posted on

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!

Discussion (19)

Collapse
artoodeeto profile image
aRtoo

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

Collapse
maisonsmd profile image
maisonsmd

turbo pascal for me!

Collapse
salz150 profile image
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.

Collapse
nickytonline profile image
Nick Taylor (he/him)

Awesome! Love the retro DOS editor. πŸ”₯

Collapse
5t3ph profile image
Stephanie Eckles Author

Thanks!

Collapse
katnel20 profile image
Katie Nelson

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

Collapse
5t3ph profile image
Stephanie Eckles Author

Lol, before my "programming" time, but in my lifetime πŸ˜‰

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

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

Collapse
5t3ph profile image
Stephanie Eckles Author

Haha, thanks!

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
5t3ph profile image
Stephanie Eckles Author

Thanks!

Collapse
ajkachnic profile image
Andrew

someone please make vim keybindingsπŸ˜‚

Collapse
ajaypatel profile image
FoodBite

Very nice

Collapse
shaonkabir8 profile image
Shaon Kabir

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

Collapse
5t3ph profile image
Stephanie Eckles Author

Have fun, thanks!

Collapse
maxdevjs profile image
maxdevjs

Amazing, loving it :)

Collapse
htnguy profile image
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

Collapse
5t3ph profile image
Stephanie Eckles Author

Haha, glad you enjoyed it!