Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The code we want to work with is in a div little bit later down the page so let me scroll down a bit and here you see it on lines 41 and 42. It's a div with the id of container, I'm going to make a little space in the middle there with a little indentation and then add in my code. First, I'll need to put in the form that will hold the input field so that the user can type in his or her list item. We'll enter a simple name, form1. Give it a method of post. And we'll leave the action empty. So let's put in our input field first, with a type of text. We're going to give this a name, toDoItem.
And we'll use that same thing for the ID. And I'm going to take advantage of one of the more recent HTML5 properties that's become quite useful and prevalent in browser support, and that's auto focus. Alright, we have our input tag. And, of course, we're also going to need a submit button to add that entry, whatever it is, to the list. So another input tag. This has a type of button. The name is addToDo. And as before, we'll do id, the same as the name, addToDo.
And the value, the label, if you will, that'll appear in the button, Add List Item. And then we'll close off the tag. Our form has already been closed for us. So next we need to build up our list. There's not much building to do here as all the list items will be added dynamically via java script. All we need to do is add a URL tag with an ID. And a couple of classes to structure our unordered list. So UL will give an ID of the list and I need to put in two classes here sortable and list we'll be using those both for CSS purposes and Java Script purposes, I close the tag and (UNKNOWN) closes off my tag pair, I will just give it a little extra helping hand there showing that, that's were our additional list items will appear.
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.