Web Design Marquette, MI | Middle Ear Media

HTML5 To-do List

December 21st, 2011

The under­ly­ing pro­gram­ming lan­guages that make the web what it is have been evolv­ing over the years, but never have they been as pow­er­ful as they are now. While these new abil­i­ties are great, it’s not very prac­ti­cal to use them unless there is cross-browser sup­port. Lucky for us the newer ver­sions of most major browsers have decent sup­port for these fea­tures. Also, fall-backs can be used to ensure a decent expe­ri­ence for peo­ple using older browsers.

I’ve been tin­ker­ing around with HTML5 lately, and decided to cre­ate a sim­ple to-do list to demon­strate some of the new fea­tures. Along the way, I real­ized which fea­tures would be most use­ful and added them. At some point, prob­a­bly after ham­mer­ing out the style sheet, it became clear that this was now more than a to-do list, it was a Task Man­age­ment App.

Full Dis­clo­sure: I nor­mally make my to-do lists with pen and paper, but I’ve been using this one for sev­eral months now and really enjoy the interface.

So let’s take a look at the Task Man­age­ment App I put together with HTML5, CSS3, and the pop­u­lar JavaScript Library called jQuery.

Fast Load­ing Web Page

My To-do List is fast load­ing. It con­tains no images at the moment. All graph­ics are the result of CSS styles which are ren­dered 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 auto­mat­i­cally renum­bered. Because many of my list items usu­ally linger for extended peri­ods, 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 repet­i­tive action, new list items now appear at the top instead of the bottom.

Editable Con­tent

Thanks to the HTML5 fea­ture called con­tent editable, the list items can be edited by a user sim­ply by click­ing on the text of the list item. Once the text has been edited, the user has the option to save or can­cel. Notice that each word is auto­mat­i­cally cap­i­tal­ized to increase readability.

Local Stor­age

For a to-do list to work prop­erly, it’s essen­tial that the list items are remem­bered some­how. This is accom­plished with local stor­age, an HTML5 API that gives web devel­op­ers the abil­ity 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 wor­ries about other peo­ple going to the site and see­ing your list items.

Com­plete Fea­ture List

• Fast Load­ing Page
• Local Stor­age
• Sortable List Items
• Editable Con­tent
• Remov­able List Items
• New List Items Prepended (added to top of list)
• Each Word Auto­mat­i­cally Capitalized
• Pseudo Ele­ment Based Num­bers (:before)
• Clear All Button
• Dona­tion But­ton (Sup­port Creativity!)
• Bor­der Radius
• Box Shadow
• Text Shadow

Fea­tures Wishlist

• Bet­ter Print Styles
• Mul­ti­ple Lists (for dif­fer­ent purposes)
• Removed List Items Are Saved (in sep­a­rate “Done” List)
• Optional Time/Date-Based Dead­lines For Each Item
• E-mail Noti­fi­ca­tion of Upcom­ing Deadlines

I know it’s really noth­ing to write home to Mom about, but since I found it use­ful, I thought I’d share. Try out my Task Man­age­ment App for your­self. If you like it, con­sider it my gift to you for the hol­i­days. Also, If you have any sug­ges­tions for more fea­tures, please let me know and I’ll try to incor­po­rate them in future versions.

Task Man­age­ment App

Tags: Content Editable, CSS, CSS3, HTML, HTML5, JavaScript, JQuery, Local Storage, Marquette, Michigan, Task Management, To-do List, Web App

This entry was posted in the Web Design category.