Skip to content

Instantly share code, notes, and snippets.

@nithinbekal

nithinbekal/index.html

Created December 22, 2010 17:55
Download ZIP

Revisions

  1. nithinbekal revised this gist Dec 22, 2010. 1 changed file with 3 additions and 6 deletions.
    9 changes: 3 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,11 @@
    <!doctype html>
    <html>
    <head>
    <title>HTML5 Toddo App</title>
    <title>My Todo List</title>
    <style>
    body { background: #0f0f0f; font-family: Tahoma, sans-serif; font-size: 12px; }
    body { background: #0f0f0f; font-family: Tahoma, sans-serif; font-size: 11px; }
    header, section, footer { display: block; }
    #container { background-color: #eee; margin: 50px auto; width: 300px; border: 4px solid #222; }
    #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; }
    @@ -24,7 +24,6 @@
    <div id="container">
    <header>
    <h1>HTML5 Todo App</h1>

    </header>

    <section id="main-content">
    @@ -34,7 +33,6 @@ <h1>HTML5 Todo App</h1>
    <input id="task" autofocus>
    </form>
    </div>


    <ul id="tasks"></ul>
    </section>
    @@ -45,7 +43,6 @@ <h1>HTML5 Todo App</h1>
    </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() {

  2. nithinbekal created this gist Dec 22, 2010.
    86 changes: 86 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    <!doctype html>
    <html>
    <head>
    <title>HTML5 Toddo App</title>
    <style>
    body { background: #0f0f0f; font-family: Tahoma, sans-serif; font-size: 12px; }
    header, section, footer { display: block; }
    #container { background-color: #eee; margin: 50px 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>