February 16, 2012

Task Management

My Task Management App started as a simple HTML5 to-do list that demonstrated some of the new features of HTML5 and CSS3. Along the way, we 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.

HTML5 To-do List

This app was built with HTML5, CSS3, and JavaScript.

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

Fast Loading Web Page

Our 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.

HTML5 To-do List

LocalStorage

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.

HTML5 To-do List

We know it’s really nothing to write home to Mom about, but since we found it useful, we thought we’d share. Try out our Task Management App for yourself. If you have any suggestions for more features, please let us know and we’ll try to incorporate them in future versions.

Features Wishlist

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