Inspiration
I've always wanted to mess around with antique typewriters, but that would be too expensive a hobby for me. I thought making an online typewriter simulation would be a good way to scratch that itch, especially since I could get some much-needed JavaScript practice.
What it does
Become the 20th-century poet of your dreams! Travel to a land without backspace or newline...
Haiku Typewriter simulates several aspects of old typewriters, like paper feed, carriage returns, and _juicy sound effects. _
Use the mini typewriter to stamp letters onto a small, haiku-sized sheet of paper. You can also download your poem as a .png when you're done with it.
How I built it
This website was made using HTML, CSS, and JavaScript. The typing feature uses an HTML canvas, which is also what allows the "text" to be easy downloaded as an image file.
Challenges I ran into
One big challenge was mobile compatibility. I didn't expect that checking for key presses would be so much more difficult on mobile devices, so I eventually settled for making Haiku Typewriter as just a desktop-compatible toy.
Accomplishments that I'm proud of
I was surprised at how addictive I found the typewriter to be, so I'm happy that I made something fun and a little experimental (suggestion: once you've written haikus, try writing ~4 sentence micro-screenplays on a single Haiku Typewriter page.)
What I learned
I still don't understand JavaScript, but it was nice to get some experience with it and to learn some tricks about triggering CSS animations through JS.
What's next for Haiku Typewriter
I'd like to continue adding polish to the typewriter to make it as satisfying as possible. Adding randomized pitch modulation to the sound effects comes to mind.
Log in or sign up for Devpost to join the conversation.