nithinbekal/index.html

## index.html
<!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>
	<!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>