Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 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
Before we start the actual creation of the projects, let's talk about each of the key technologies being used. Across both projects, there are three HTML and related technologies that are being used: contenteditable, drag and drop, and localStorage, let's start with contenteditable. Basically, this feature makes any page area editable in the browser. It uses a single attribute, contenteditable of course, which can be set to equal to true, equal to false, used by itself, which means true or inherit, where we'll take on the contenteditable characteristics of its parent.
As the name implies, this is used to transfer the data from a dragged object. It is initially set in dragstart and then it is put in the drop event. There is pretty good browser support for drag and drop. Let's take a look at Can I use. As you can see, pretty much all the major players are in line with drag and drop although we are waiting for Internet Explorer 10 to come out. Finally, let's take a look at localStorage. LocalStorage is very straightforward to use for all that it does, and it does a really wonderful thing.
It brings the concept of state to websites without relying on server-side coding. And unlike cookie which is also used to convey states it is stored in the browser. It has a much larger limit than cookies, 5 megabytes versus 4 kilobytes, and it uses a very simple name value pair structure for strings only. Although there are a few other commands for localStorage, most of the time you'll be using these two, setItem and getItem.
SetItem takes two arguments; the first is the name of the item that you're setting and the second argument is its value. For getItem you only need the name. Browser support-wise we're pretty good. Let's take a look again at Can I use and I think we have as solid as support as we've seen for almost any other HTML5 technology. Overall I think the technologies involved in these projects are full-featured and pretty well supported across the browsers. So let's go build those projects.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.