Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Design and personalized recommendations.Start Your Free Trial Now
- View Offline
- Making content editable
- Saving edits
- Setting up the core files for your app
- Removing list items
- Enabling drag-and-drop sorting
Skill Level Intermediate
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, eggs, potatoes, and artichokes.
And now if I want to get rid of something, what I have to do is just go up, highlight it, delete it, and then hit Delete or Backspace in order to move the list up. It's basically an open entry and I can put any straight text I want in here. Well, talk about bang for buck. That just blows me away. But of course there is a hitch. Now if I refresh the page, as if I came back the next day, all my changes are gone. We can amend that situation pretty quickly as you'll see in the next lesson.