Do you know how many times I've stared at a web page and thought, boy, I wish I could …change that? And did you know that with HTML5 any portion of a web page can be made editable …with literally a single word, and that word is contenteditable. …We'll apply it to our basic to- do list to get the ball rolling. …So I am going to go to my Code Editor and scroll down to around line 38 or so, where …I have the div with an ID of container, and an unordered list with the ID of the list, …and my initial entry Enjoy Life.…

So all I need to do here in order to make all the items in the unordered list editable …is to put in that one attribute and we're going to put it right in the ul tag there, …and it is contenteditable. …Believe it or not, that's it. Let's save the page and try it out. …So I'll go back to the browser, click Refresh, and let's just scroll down a little bit. …So now I should be able to just click right in here and let's go ahead and get rid of …this placeholder entry here, and I'll put in my own list; quick shopping list of milk, …

Resume Transcript Auto-Scroll

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.