DEV Community

Cover image for ⌨️ An ACTUAL typewriter (that auto types and is interactive too!)  🤯
InHuOfficial
InHuOfficial

Posted on

⌨️ An ACTUAL typewriter (that auto types and is interactive too!) 🤯

A bit late to the party but here is my silly entry for the typewriter wars!

And unlike everyone else...I built a typewriter!

warning: This will not be very accessible for screen reader users I am afraid.

It is a little rough around the edges and way better on a PC, but it works and it will do for a quick idea (I say quick, it took ages!).

It is interactive

Once the initial animation has played you can use it just like a typewriter! You may have to click on the typewriter to focus the fiddle.

on mobile: there is an input you can focus to bring the keyboard up.

What no tutorial this time?

Nope, there is not a single piece of code here that I would want you to use in the real world!

However I have taken the time to make sure that the key movements actually correspond to the keys on your keyboard, so I hope that you can forgive the shoddy code in exchange for the eternity that it took me to label up all the parts of the SVG!

Anyway, just have fun with it and at least I joined the fight, even if it was late!

Discussion (28)

Collapse
siddharthshyniben profile image
Siddharth

Looks awesome! I haven't tried it (doesn't work on mobile for me - why?) But looks awesome!

Collapse
inhuofficial profile image
InHuOfficial Author

if you click to the left in the input the keyboard should pop up and it will work then, or are you saying with the input focused it isn't working?

Collapse
siddharthshyniben profile image
Siddharth

I can't focus the input on mobile for some reason.

Thread Thread
siddharthshyniben profile image
Siddharth

Actually, I can't even focus it on my laptop. I'm guessing the fiddle embed is interfering

Thread Thread
inhuofficial profile image
InHuOfficial Author

You don’t need to focus the input on laptop at least, annoying you can’t focus the input though!

Collapse
afif profile image
Temani Afif

From where did you buy this antiquity? 😯

Collapse
inhuofficial profile image
InHuOfficial Author

I built it in a cave…from a box of scraps!

Collapse
afif profile image
Temani Afif

You have a cave?? you are suspicious 🤔

Thread Thread
inhuofficial profile image
InHuOfficial Author

Well everyone took all my ideas for the typewriter wars so I had to find my fortress of solitude to devise a plan! 😋

Collapse
pontakornth profile image
pontakornth

Very cool, I love how I can type it even I use Colemak. You can try to simulate jamming for a challenge.

Collapse
inhuofficial profile image
InHuOfficial Author

Well these are both great ideas, guess mark 2 will have to come out at some point! 🤣

Collapse
pontakornth profile image
pontakornth

No, I actually mean it prints correct character even I used Colemak. It's not really an idea. But, I would love to see simulated jamming.

Thread Thread
inhuofficial profile image
InHuOfficial Author

My code is buggy enough that if you try really hard it will probably break, does that count? 😜

Collapse
miketalbot profile image
Mike Talbot • Edited

Love it, especially the typing that works. Bloody brilliant.

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks Mike! Glad someone enjoyed the typing bit as that was far more difficult than I care to admit 🤣

Collapse
inhuofficial profile image
InHuOfficial Author

Hope you had fun with this one!

Not an official entry, just a silly one, but as I have been quiet I thought I better throw something together just to join in the fun!

Collapse
imiahazel profile image
Imia Hazel

It's Amazing. I Typed a lot here :)
Thanks for sharing.

Collapse
posandu profile image
Posandu

image

Collapse
inhuofficial profile image
InHuOfficial Author

I might see if I can improve this one to become an actual writer app.

Collapse
adparris profile image
Andrew Parris

That's pretty neat! 😀

Collapse
jayjeckel profile image
Jay Jeckel

When this typewriter thing started, I bet my buddy that before it was over someone would break down and make a working typewriter. You just won me 5 moneys! :P

Collapse
inhuofficial profile image
InHuOfficial Author

Glad my breakdown won you some moneys! 😜🤣

Collapse
nombrekeff profile image
Keff

Fantastic work! It's really pleasing to hold down a key and let the machine go

Collapse
khangnd profile image
Khang

Super cool 👍

Collapse
pandademic profile image
Pandademic

Great Job! Definitely My favorite yet!

Collapse
gillarohith profile image
Rohith Gilla

Wow great stuff!

Collapse
tayfunerbilen profile image
Tayfun Erbilen

I wrote almost 10 minute without stop :D don't do this to us again :/ joke aside super cool mate!

Collapse
inhuofficial profile image
InHuOfficial Author

Perhaps I should turn it into a "focus writer" and when you are done you can export your work 🤣