HTML5 To-do List

I’ve been tinkering around with HTML5 lately, and decided to create a simple HTML5 to-do list to demonstrate some of the new features. Along the way, I realized which features would be most useful and added them. At some point, probably after hammering out the style sheet, it became clear that this was now more than a to-do list, it was a Task Management App.

Full Disclosure: I normally make my to-do lists with pen and paper, but I’ve been using this one for several months now and really enjoy the interface.

The underlying programming languages that make the web what it is have been evolving over the years, but never have they been as powerful as they are now. While these new abilities are great, it’s not very practical to use them unless there is cross-browser support. Lucky for us the newer versions of most major browsers have decent support for these features. Also, fall-backs can be used to ensure a decent experience for people using older browsers.

So let’s take a look at the Task Management App I put together with HTML5, CSS3, and JavaScript.

Fast Loading Web Page

My To-do List is fast loading. It contains no images at the moment. All graphics are the result of CSS styles which are rendered in the browser very quickly.

Editable Content

Thanks to the HTML5 feature called content editable, the list items can be edited by a user simply by clicking on the text of the list item. Once the text has been edited, the enter key is used to save the new list item. Notice that each word is automatically capitalized to increase readability.

Local Storage

For a to-do list to work properly, it’s essential that the list items are remembered somehow. This is accomplished with localStorage, an HTML5 API that gives web developers the ability to store up to 5MB on a users local machine. So your list will still be there when you return. The list data is stored client-side (in the user’s browser) so no worries about other people going to the site and seeing your list items.

Complete Feature List

• Fast Loading Page
• LocalStorage
• Editable Content
• Removable List Items
• Each Word Automatically Capitalized
• Pseudo Element Based Numbers (:before)
• Clear Completed Tasks Button
• Border Radius
• Box Shadow
• Text Shadow

I know it’s really nothing to write home to Mom about, but since I found it useful, I thought I’d share. Try out my Task Management App for yourself. If you like it, consider it my gift to you for the holidays. Also, If you have any suggestions for more features, please let me know and I’ll try to incorporate them in future versions.

Try out my Task Management App