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, 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.
Complete Feature List
- Fast Loading Page
- 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
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.
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.
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.
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 have any suggestions for more features, please let me know and I’ll try to incorporate them in future versions.
- 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