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 the popular JavaScript Library called jQuery.

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.

Sortable List Items

With the help of some JavaScript, users are able to drag and drop list items to alter their order. They are automatically renumbered. Because many of my list items usually linger for extended periods, my lists can become quite lengthy. I found myself adding new list items only to scroll down and drag them up to the top every time. To avoid this repetitive action, new list items now appear at the top instead of the bottom.

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 user has the option to save or cancel. 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 local storage, 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
• Local Storage
• Sortable List Items
• Editable Content
• Removable List Items
• New List Items Prepended (added to top of list)
• Each Word Automatically Capitalized
• Pseudo Element Based Numbers (:before)
• Clear All Button
• Donation Button (Support Creativity!)
• Border Radius
• Box Shadow
• Text Shadow

Features Wishlist

• Better Print Styles
• Multiple Lists (for different purposes)
• Removed List Items Are Saved (in separate “Done” List)
• Optional Time/Date-Based Deadlines For Each Item
• E-mail Notification of Upcoming Deadlines

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

About Obadiah

Obadiah is Owner and Creative Director at Middle Ear Media in Marquette, Michigan. He specializes in designing and developing web sites based on usability, standards, and modern technologies. He is also passionate about typography, branding, graphic design, music and much more. View all posts by Obadiah →