Join Joseph Lowery for an in-depth discussion in this video Exploring what we're going to build, part of HTML5 Projects: Advanced To-Do List.
As I mentioned in the intro, we're actually creating two different To Do List apps, one, fairly simple, and the other, much more enhanced. Let me show you how each of them work so you can get a clearer picture of what's ahead. If you're the type who likes to dive right into the code, you'll find the completed projects in the chapter 1 01_01 folder. So the basic To Do List that I now have loaded in my browser starts off with a single entry, which I can easily edit.
I can also add a new item just by continuing to enter content. So I'll hit Return. And put down a couple of more items to get. Of course, items can be removed just by selecting and deleteing. And if I want to come back later to my list, I can click Save. Let me simulate that by just clicking Refresh. And there's my list still available. Finally, if I want to start over, I'll click Clear All. Now, let's take a look at the advanced To Do List. You'll notice it's stet up somewhat differently.
There is no initial item that acts as a placeholder. Instead, there's just a big old text field and a big old Add To List button. So, when I enter an item and then click the button, my new entry will appear below. I can also enter an item, press Tab, and then hit Return or Enter. I'll scroll down a bit to see more of our list. Let me add a couple more items, so you can see what else is possible. We'll call mom, and then we'll walk the dog. Now, I can remove any item by hovering over it, and clicking the red x. I can also reorder the list by dragging and dropping any entry's handle.
Let's move call mom up to the top followed quickly by walking the dog. And if I need to, I can edit any item. Items in this list are stored automatically. There's no need for a Save All link. Let me open this same page in another tab to demonstrate that. I'll copy the URL, create a new tab, and paste it in. And there's my current list. And of course I have the Clear All feature to start fresh. So there you have it. Now that you've seen the end result you're ready to step back for a moment to get a better sense of the HTML 5 technologies at play.
- Making content editable
- Saving edits
- Setting up the core files for your app
- Removing list items
- Enabling drag-and-drop sorting