Building a simple to-do list (Become an expert)

While researching material for this book, I came across a great post by Koes Bong at http://web.koesbong.com/2011/01/24/sortable-and-editable-to-do-list-using-html5s-localstorage/ on creating a sortable to-do list using Local Storage. It shows off a number of aspects of using Local Storage that we have covered in this book perfectly. Let's take a look at how.

Getting ready

For this task, you'll need a few things in addition to your normal text editor and the code that accompanies this book. I've assumed that local copies of all of the following plugins have been saved for the purposes of this task:

Note

All credit for the original code should go to Koes Bong. I've merely updated it to use more recent versions of jQuery and some of the plugins, as well as updating some of the styles, to give a more polished look.

How to do it...

Perform the following steps, for building a simple to-do list:

  1. Let's get all of the files in place first, so create a folder called To-Do List somewhere on your PC, and save copies of the following folders from the code available with this book: css, img, and js.
  2. In your text editor, add the following code to a new HTML document and save it as todolist.html within the To-Do List folder:
    <!DOCTYPE html>
<html>
  <head>
    <title>Test To-do List using Local Storage</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/base.css" 
    type="text/css" />
  </head>
  <body>
    <div id="container">
      <h1>Test To-Do List</h1>
      <form id="todo-form">
        <input id="todo" type="text" />
        <input id="submit" class="button medium red" 
        type="submit" value="Add to List">
      </form>
      <ul id="show-items"></ul>
      <a href="#" id="clear-all">Clear All</a>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.inlineedit.js"></script>
    <script src="js/pubsub.js"></script>
    <script src="js/base.js"></script>
  </body>
</html>
  3. If all is well, you should see something similar to the following, when previewing it in a browser. Here, I've already added two items to the list:
    How to do it...

How it works...

Although there may appear to be a fair chunk of code in this recipe, most of the magic is in the base.js file. This includes all of the method handlers to manage the storing and retrieving of content from Local Storage.

If we look at the script closely, we see that it starts with a request to retrieve content from LocalStorage, which is then fed into a for loop to populate the list shown on screen. The methods that follow this are then responsible for adding, removing, or sorting content accordingly. The code then contains some additional functionality to allow in-line editing of each task using the jquery.inlineedit.js plugin, as well as functionality to fade in and out the X logo on each task item. Finally the code finishes with a method to manage the saving of content to LocalStorage, using the jQuery pub/sub plugin from Peter Higgins.

There's more...

This is very much a proof of concept. You may well find it doesn't work in Internet Explorer, for example! It is worth studying the code though—there are some great examples of how you can use jQuery to manage Local Storage. I would suggest though that you will want to work on it if you use it in your own projects—it needs altering to make compatible with IE; it could also be turned into a plugin, which will certainly make it more useful.

So far, we've looked at how you can use Local Storage in a web application of some description. What about using it in a content management system or blog? This is equally possible; over the next two recipes, we'll take a look at how you can achieve both, beginning with implementing it in a simple "Contact Us" form.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset