This application uses local storage for storing data. The data will not be deleted by itself while your tab is closed.
Here is the code :
Make a folder structure like this :-
App
/assets
/todo.css
/todo.js
/lib
/Bootstrap
/bootstrap.min
/bootstrap.min
/jQuery
/jquery.min
/jquery.ui.min
/jquery.ui.min
/index
you can download jQuery and Bootstrap files from the official website.
open a index.file in your editor:-
<html>
<head>
<title>AngelPrime to-do List</title>
<link rel="stylesheet" href="lib/Bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="lib/jQuery/jquery.ui.min.css" />
<link rel="stylesheet" href="assets/todo.css" />
</head>
<body class="well">
<div id="container">
<div id="header"> To Do List </div>
<div class="task-list task-container" id="pending">
<h3>Pending</h3>
<!--<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 task-container" id="inProgress">
<h3>In Progress</h3>
</div>
<div class="task-list task-container" id="completed">
<h3>Completed</h3>
</div>
<div class="task-list">
<h3>Add a task</h3>
<form id="todo-form" class="clearfix">
<input type="text" placeholder="Title" />
<textarea placeholder="Description"></textarea>
<input type="text" id="datepicker" placeholder="Due Date (dd/mm/yyyy)" />
<input type="button" class="btn btn-info" value="Add Task" onclick="todo.add();" />
</form>
<input type="button" class="btn btn-info" value="Clear Data" onclick="todo.clear();" />
<div id="delete-div">
Drag Here to Delete
</div>
</div>
<div style="clear:both;"></div>
<script type="text/javascript" src="lib/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="lib/Bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/jQuery/jquery.ui.min.js"></script>
<script type="text/javascript" src="assets/todo.js"></script>
<script type="text/javascript">
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker("option", "dateFormat", "dd/mm/yy");
$(".task-container").droppable();
$(".todo-task").draggable({ revert: "valid", revertDuration:200 });
todo.init();
</script>
</div>
</body>
</html>
open todo.css file and paste following code
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{border:1px solid #60b7c4;}
.nano .pane { background: #888; }
.nano .slider { background: #111; }
body {
/* Override bootstrap properties */
background-color: #60b7c4 !important;
border: 0 !important;
}
#container{
margin: 0 auto;
width: 1060px;
min-height: 100%;
background-color: transparent;
border: 0;
}
#header{
font-size: 30px;
text-align: center;
margin-bottom: 15px;
color: #fff;
}
.task-list{
width: 250px;
float: left;
margin: 0 5px;
background-color: #d7f4f4;
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{
display: none;
background-color: #fff;
border: 3px dotted #000;
margin: 10px;
height: 75px;
line-height: 75px;
text-align: center;
}
open todo.js file and paste
var todo = todo || {},
data = JSON.parse(localStorage.getItem("todoData"));
data = data || {};
(function(todo, data, $) {
var defaults = {
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",
"2" : "#inProgress",
"3" : "#completed"
};
todo.init = function (options) {
options = options || {};
options = $.extend({}, defaults, options);
$.each(data, function (index, params) {
generateElement(params);
});
/*generateElement({
id: "123",
code: "1",
title: "asd",
date: "22/12/2013",
description: "Blah Blah"
});*/
/*removeElement({
id: "123",
code: "1",
title: "asd",
date: "22/12/2013",
description: "Blah Blah"
});*/
// 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();
}
});
});
// 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();
}
})
};
// 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);
wrapper.draggable({
start: function() {
$("#" + defaults.deleteDiv).show();
},
stop: function() {
$("#" + defaults.deleteDiv).hide();
},
revert: "invalid",
revertDuration : 200
});
};
// Remove task
var removeElement = function (params) {
$("#" + defaults.taskId + params.id).remove();
};
todo.add = 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 = "";
};
var generateDialog = function (message) {
var responseId = "response-dialog",
title = "Messaage",
responseDialog = $("#" + responseId),
buttonOptions;
if (!responseDialog.length) {
responseDialog = $("<div />", {
title: title,
id: responseId
}).appendTo($("body"));
}
responseDialog.html(message);
buttonOptions = {
"Ok" : function () {
responseDialog.dialog("close");
}
};
responseDialog.dialog({
autoOpen: true,
width: 400,
modal: true,
closeOnEscape: true,
buttons: buttonOptions
});
};
todo.clear = function () {
data = {};
localStorage.setItem("todoData", JSON.stringify(data));
$("." + defaults.todoTask).remove();
};
})(todo, data, jQuery);
In the bootstrap and jQery folder add there file from the website.
0 Comment(s)