🤯 50% Off! 700+ courses, assessments, and books

Building a To-Do List with jQuery and Local Storage

Shaumik Daityari
Share

We all have those days when we have a lot of things to accomplish, but no way to know if we will complete all of them. In these situations, a to-do list is extremely helpful. There are great mobile apps, online tools, and even WordPress plugins which perform this task, but have you ever wondered how long it would take to create one by yourself?

In this tutorial, we will create a basic to-do list. Tasks will fall into one of three categories – pending, in progress, and completed. Our application will allow new tasks to be created, which go into the pending category by default. Tasks can easily be moved between categories using drag and drop technology. Of course, tasks can also be deleted.

Prerequisites

The following libraries are used in this project.

  • jQuery 1.10.2
  • jQuery UI 1.10.3
  • Bootstrap 2.2.2

Creating the Markup and CSS

Let’s create the basic look and feel of the application before adding the functionality via JavaScript.

<div class="task-list" id="pending">
  <h3>Pending</h3>
  <!-- Sample task added manually to check look -->
  <div class="todo-task">
    <div class="task-header">Sample Header</div>
    <div class="task-date">25/06/1992</div>
    <div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
  </div>
</div>

<div class="task-list" id="inProgress">
  <h3>In Progress</h3>
</div>

<div class="task-list" id="completed">
  <h3>Completed</h3>
</div>

<div class="task-list">
  <h3>Add a task</h3>
  <form id="todo-form">
    <input type="text" placeholder="Title" />
    <textarea placeholder="Descrtipion"></textarea>
    <input type="text" placeholder="Due Date (dd/mm/yyyy)" />
    <input type="button" class="btn btn-primary" value="Add Task" />
  </form>

  <input type="button" class="btn btn-primary" value="Clear Data" />

  <div id="delete-div">Drag Here to Delete</div>
</div>

Next, add some styling to the elements using the following CSS.

.task-list {
  width: 250px;
  float: left;
  margin: 0 5px;
  background-color: #e3e3e3;
  min-height: 240px;
  border-radius: 10px;
  padding-bottom: 15px;
}

.task-list input, .task-list textarea {
  width: 240px;
  margin: 1px 5px;
}

.task-list input {
  height: 30px;
}

.todo-task {
  border-radius: 5px;
  background-color: #fff;
  width: 230px;
  margin: 5px;
  padding: 5px;
}

.task-list input[type="button"] {
  width: 100px;
  margin: 5px;
}

.todo-task > .task-header {
  font-weight: bold;
}

.todo-task > .task-date {
  font-size: small;
  font-style: italic;
}

.todo-task > .task-description {
  font-size: smaller;
}

h3 {
  text-align: center;
}

#delete-div {
  background-color: #fff;
  border: 3px dotted #000;
  margin: 10px;
  height: 75px;
  line-height: 75px;
  text-align: center;
}

Our static to-do page should look like the following image.

Todo list demo

Defining the JavaScript Constants

Throughout this tutorial, we will be referring to certain constants to avoid hard coding values. These constants are shown below.

var defaults = {
  // CSS selectors and attributes that would be used by the JavaScript functions
  todoTask: "todo-task",
  todoHeader: "task-header",
  todoDate: "task-date",
  todoDescription: "task-description",
  taskId: "task-",
  formId: "todo-form",
  dataAttribute: "data",
  deleteDiv: "delete-div"
}, codes = {
  "1" : "#pending", // For pending tasks
  "2" : "#inProgress",
  "3" : "#completed"
};

Creating Tasks

Tasks are created using the following JavaScript function.

// Add Task
var generateElement = function(params) {
  var parent = $(codes[params.code]),
      wrapper;

  if (!parent) {
    return;
  }

  wrapper = $("<div />", {
    "class" : defaults.todoTask,
    "id" : defaults.taskId + params.id,
    "data" : params.id
  }).appendTo(parent);

  $("<div />", {
    "class" : defaults.todoHeader,
    "text": params.title
  }).appendTo(wrapper);

  $("<div />", {
    "class" : defaults.todoDate,
    "text": params.date
  }).appendTo(wrapper);

  $("<div />", {
    "class" : defaults.todoDescription,
    "text": params.description
  }).appendTo(wrapper);
};

The following code sample shows how a single task is generated.

generateElement({
  id: "123",
  code: "1",
  title: "My Uber Important Task",
  date: "5/2/2014",
  description: "I have to do a lot of steps to implement this task!"
});

Deleting Tasks

Removing tasks is fairly simple, and can be accomplished using the following function.

var removeElement = function(params) {
  $("#" + defaults.taskId + params.id).remove();
};

Saving Tasks in Local Storage

The tasks we create could be stored using a database, cookies, or a number of other technologies. However, in this application we’re going to use HTML5’s local storage for its simplicity. In JavaScript, the variable localStorage stores all of this data. The following code sample shows how the to-do list data is retrieved from local storage.

var data = JSON.parse(localStorage.getItem("todoData"));

Each task would be stored within the data variable. An example task object is shown below.

{
  id : id, // Unique ID; timestamp is used here
  code: "1", // Code identifying the category
  title: title, // Title of the task
  date: date, // Due date
  description: description // Description of the task
}

We update the saved data in local storage using the following code.

localStorage.setItem("todoData", JSON.stringify(data));

Submitting the To-Do Form

When the to-do form is submitted, a new task is created and added to local storage, and the contents of the page are updated. The following function implements this functionality.

var addItem = function() {
  var inputs = $("#" + defaults.formId + " :input"),
      errorMessage = "Title can not be empty",
      id, title, description, date, tempData;

  if (inputs.length !== 4) {
    return;
  }

  title = inputs[0].value;
  description = inputs[1].value;
  date = inputs[2].value;

  if (!title) {
    generateDialog(errorMessage);
    return;
  }

  id = new Date().getTime();

  tempData = {
    id : id,
    code: "1",
    title: title,
    date: date,
    description: description
  };

  // Saving element in local storage
  data[id] = tempData;
  localStorage.setItem("todoData", JSON.stringify(data));

  // Generate Todo Element
  generateElement(tempData);

  // Reset Form
  inputs[0].value = "";
  inputs[1].value = "";
  inputs[2].value = "";
};

Implementing Drag and Drop

jQuery UI provides drag and drop functionality. We need to make each task draggable and each of the three categories droppable. To delete a task, we need to hide the delete area by default, and show it during the time an item is being dragged. Therefore, we first modify the generateElement() function slightly to first make the to-do list items draggable, and then make the delete area visible when the item is being drug.

$("." + defaults.todoTask).draggable();

// Add Task
var generateElement = function(params) {
  wrapper.draggable({
    start: function() {
      $("#" + defaults.deleteDiv).show();
    },
    stop: function() {
      $("#" + defaults.deleteDiv).hide();
    }
  });
...
};

Secondly, we need to add the droppable() function to each of the categories as the elements are supposed to be dropped in any one of the three areas.

// Adding drop function to each category of task
$.each(codes, function(index, value) {
  $(value).droppable({
    drop: function(event, ui) {
      var element = ui.helper,
          css_id = element.attr("id"),
          id = css_id.replace(options.taskId, ""),
          object = data[id];

      // Removing old element
      removeElement(object);

      // Changing object code
      object.code = index;

      // Generating new element
      generateElement(object);

      // Updating Local Storage
      data[id] = object;
      localStorage.setItem("todoData", JSON.stringify(data));

      // Hiding Delete Area
      $("#" + defaults.deleteDiv).hide();
    }
  });
});

Thirdly, we need to add some code to delete tasks when they are dropped in the delete area.

// Adding drop function to delete div
$("#" + options.deleteDiv).droppable({
  drop: function(event, ui) {
    var element = ui.helper,
        css_id = element.attr("id"),
        id = css_id.replace(options.taskId, ""),
        object = data[id];

    // Removing old element
    removeElement(object);

    // Updating local storage
    delete data[id];
    localStorage.setItem("todoData", JSON.stringify(data));

    // Hiding Delete Area
    $("#" + defaults.deleteDiv).hide();
  }
});

Conclusion

The final code is available on GitHub. You can also check out the project’s live demo.