DEV Community

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

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!

Top comments (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
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
pontakornth profile image
Pontakorn Paesaeng

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
pontakornth profile image
Pontakorn Paesaeng

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
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
imiahazel profile image
Imia Hazel

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

Collapse
 
posandu profile image
Posandu

image

Collapse
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev

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