Building an Advanced To-Do List with HTML5

Author

Released

8/26/2013

The HTML5 Projects series combines HTML5, CSS3, and recent JavaScript API technologies to enhance your web projects with interactivity and multimedia. This installment shows how to create a basic to-do list widget with an editable field so users can enter their tasks and delete them as they are completed, and a more advanced version with all the bells and whistles, including a drag-and-drop interface that allows for quick and easy sorting. Author Joseph Lowery covers HTML5 technologies such as web databases, content editing in the browser, and CSS transitions and transforms.

Topics include:

Making content editable

Saving edits

Setting up the core files for your app

Removing list items

Enabling drag-and-drop sorting

Skill Level Intermediate

45m 50s

Duration

73,195

Views

Show MoreShow Less

- [Voiceover] Hi, I'm Joe Lowery,and I'm glad you've joined mefor HTML5 Projects, Advanced To Do List.In this course, I'm going to show you two approachesto integrating To Do lists into your sites.The first is straight up simple.Very basic, but it does the job.So you can easily enter and editas many list items as you needand then save them for later if desired,thanks to the wonders of the HTML 5 feature, local storage.Then, we'll tackle a much more enhanced versionof the To Do list, with bells and whistles galore.

Once we're done, your site visitors will be able to add,edit, and delete your list items with ease.They will even be able to sort them in a prioritized orderjust by dragging them into position.This app takes advantageof some pretty heavy-duty Javascript,but don't worry.I'll explain how it all works from start to finish.Whichever approach you want to take,basic or advanced,this course will give you the toolsto engage your site visitorswith a fully interactive feature.Let's get started.