Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
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.