Building a To-Do List with jQuery and Local Storage
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.
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.
