Let’s Make a Quick Notepad App
There is a plethora of note taking and personal management applications out there, obvious examples being Evernote and Google Keep. While these services offer massive cloud note archiving and even voice recognition, sometimes I just want a quick and simple place to jot down my daily to-do list and other ideas.
And I bet you do too.
Before we begin, some coding music:
What I Wanted
The first step to any development is to put together a basic idea of what we want to achieve; what do we want our program to do. And here’s what I wanted:
- A clean, minimalist page
- White space everywhere. Because unnecessary colors suck.
- Persistent storage. This is just a geek word for “I want to be able to see what I've written long after I write it (unless I delete it)”
- Arial and Garamond fonts. Because they look great.
And that’s about it!
Once I decided what features I needed, I investigated different languages that could use. I am using HTML with basic inline JavaScript and CSS styling. Why?
HTML: We’re building a web app and web apps use HTML.
JavaScript: Helps make websites interactive. I mean, we want to actually write notes right?
CSS: This allows us to style our code and gives some nice flair to the program.
And then I built it. You can find the finished product here: http://gdriv.es/notepad
HACK IT UP!
I decided to put the code up for grabs so you can make your own notepads. But, before you can download and edit it, you need to download your favorite text editor. I’m using Notepad++ because I’m on a PC, but you can always use good old Notepad, TextEdit on Macintosh, or Geany for Linux.
Download this gist (HTML file) and save it to your desktop for quick access:
https://gist.github.com/geoffmomin/5542808
Open up the html document in your favourite web browser (if on a PC, just right-click and select open with Google Chrome, Firefox, Opera etc.)
TYPE AWAY. It really is as simple as that.
Cheers,
G.
