Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
HTML5 Todo App source
<!doctype html>
<html>
<head>
<title>My Todo List</title>
<style>
body { background: #0f0f0f; font-family: Tahoma, sans-serif; font-size: 11px; }
header, section, footer { display: block; }
#container { background-color: #eee; margin: 0 auto; width: 300px; border: 4px solid #222; }
header h1 { text-align: center; margin: 0; padding: 15px 0;}
label { display: block; padding-bottom: 5px; text-align: center; }
#task { border: 1px solid #888; margin-left: 50px; width: 200px; }
#tasks { margin: 20px; padding: 0; }
#tasks li { list-style-type: none; padding: 5px; }
#tasks li:nth-child(2n) { background-color: #e8e8e8; }
#tasks li:nth-child(2n+1) { background-color: #ddd; }
#tasks li:hover { background-color: #ccc; }
#tasks li a { color: red; display: block; float: right; text-decoration: none; }
footer { background-color: #000; color: #aaa; padding: 20px; }
footer a { color: #aaa; }
footer a:hover { color: #eee; }
</style>
</head>
<body>
<div id="container">
<header>
<h1>HTML5 Todo App</h1>
</header>
<section id="main-content">
<div class="form-area">
<form id="tasks-form">
<label for="task">Add a task here and hit enter</label>
<input id="task" autofocus>
</form>
</div>
<ul id="tasks"></ul>
</section>
<footer>
<a href="http://nithinbekal.com/2010/12/04/a-simple-to-do-list-app-using-html5-and-local-storage/">How to create this app</a> |
<a target="_blank" href="http://twitter.com/home?status=A+simple+todo+list+app+using+HTML5+and+local+storage+by+%40nithinbekal+http%3A%2F%2Fbit.ly/gPYbyI">Share on Twitter</a>
</footer>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i = 0;
// Initial loading of tasks
for( i = 0; i < localStorage.length; i++)
$("#tasks").append("<li id='task-"+ i +"'>" + localStorage.getItem('task-'+i) + " <a href='#'>x</a></li>");
// Add a task
$("#tasks-form").submit(function() {
if ( $("#task").val() != "" ) {
localStorage.setItem( "task-"+i, $("#task").val() );
$("#tasks").append("<li id='task-"+i+"'>"+localStorage.getItem("task-"+i)+" <a href='#'>x</a></li>")
$("#task-" + i).css('display', 'none');
$("#task-" + i).slideDown();
$("#task").val("");
i++;
}
return false;
});
// Remove a task
$("#tasks li a").live("click", function() {
localStorage.removeItem($(this).parent().attr("id"));
$(this).parent().slideUp('slow', function() { $(this).remove(); } );
for(i=0; i<localStorage.length; i++) {
if( !localStorage.getItem("task-"+i)) {
localStorage.setItem("task-"+i, localStorage.getItem('task-' + (i+1) ) );
localStorage.removeItem('task-'+ (i+1) );
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment