Skip to content

Instantly share code, notes, and snippets.

@prasadshir

prasadshir/jQ-Simple-Todos.html

Created September 1, 2013 07:23
Show Gist options
  • Save prasadshir/6402863 to your computer and use it in GitHub Desktop.
Save prasadshir/6402863 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Simple ToDos List with Local Storage
Raw
jQ-Simple-Todos.html
<html>
<head>
<script src="js/jquery-1.9.1.js"></script>
<style>
div, section, footer, header{
padding:10px;border:1px solid green;
}
header, footer{text-align:center;}
.container {
padding:0;
max-width:960px; /*used for limiting the width*/
margin:0 auto; /*used for centrally aligning container w.r.t viewport*/
}
footer {
height: 70px;
background-color: white;
}
.del{
color:red; cursor:pointer; padding:0 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>JQ TO DO!</h1>
</header>
<section>
<div id="inparea">
<label for="todo_inp">Enter New Task</label>
<input type="text" id="todo_inp" name="todo_inp"/>
<button>Add</button>
</div>
<div id="display">
<h2>ToDos</h2>
<ul id ="todolist">
<li>Default Task</li>
</ul>
</div>
</section>
<footer>
<p>Copyright!</p>
</footer>
</div>
<script>
$(document).ready(function(){
var todos = localStorage.mytodos ? $.parseJSON(localStorage.mytodos) : [];
//console.log(todos);
if(todos.length>0){
$.each(todos, function(i,v){
var newToDo = $("<li>" + todos[i] + "</li>");
$("#todolist").append(newToDo);
})
}
$("#inparea button").on("click", function(){
todos.push($("#todo_inp").val());
//console.log(todos);
localStorage.mytodos = JSON.stringify(todos);
var newToDo = $("<li>" + $("#todo_inp").val() + "</li>");
$("#todolist").append(newToDo);
$("#todo_inp").val("")
});//inparea button click
$("ul").on("dblclick", "li", function(){
var todoval = $(this).text();
todos.splice($.inArray(todoval, todos),1);
console.log(todos);
$(this).remove();
localStorage.mytodos = JSON.stringify(todos);
}); //ul dblclick
});//document ready
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment