Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
There are currently no FAQs about HTML5 Projects: Advanced To-Do List.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.