jQuery To-Do List Manager with localStorage Support - Todo List

Yet another To-Do list manager powered by jQuery and jQuery UI that supports drag and drop, datepicker and has the ability to save the list data to client side using Html5 localStorage.

See also:

• Creating A Minimal Todo List Web App With jQuery Todo Plugin
• Simple To-Do List App with jQuery and Bootstrap 3

Basic Usage:

1. Load the necessary jQuery library and jQuery UI's files in the web page/app.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 

2. Load the jQuery todo.js after jQuery library.

<script src="todo.js"></script> 

3. Create a To-Do list app on the web page that allows you to add/remove tasks through drag and drop.

<div class="container">
<div class="task-list" id="pending">
<h3>Pending</h3>
</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="Description"></textarea>
<input type="text" id="datepicker" placeholder="Due Date (dd/mm/yy)" />
<input type="button" class="btn btn-primary" value="Add task" onclick="todo.add();" />
</form>
<input type="button" class="btn btn-primary" value="Clear all" onclick="todo.clear();"/>
<div id="delete-div">Drag Here to Delete</div>
</div>
</div>

4. Style it via CSS.

body {
background-color: #374a5d;
border: 0;
}
#container {
margin: 0 auto;
width: 1060px;
min-height: 100%;
background-color: transparent;
border: 0px;
}
#header {
font-size: 30px;
text-align: center;
margin-bottom: 15px;
color: #fff;
}
.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;
}
.task-list input[type="button"] {
width: 100px;
margin: 5px;
}
.todo-task {
border-radius: 5px;
background-color: #fff;
width: 230px;
margin: 5px;
padding: 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 {
display: none;
background-color: #fff;
border: 3px dotted #000;
margin: 10px;
height: 75px;
line-height: 75px;
text-align: center;
}

5. Initialize the plugin.

<script type="text/javascript">
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", "dateFormat", "dd/mm/yy");
todo.init();
</script>

---

This awesome jQuery plugin is developed by mcberros. For more Advanced Usages, please check the demo page or visit the official website.