jQuery – Todo List with Local Storage

by ian_smithz

HTML

<h1>TodoList</h1>
<input type='text' id='name' placeholder='New Task'>
<a href='#' id='add-btn'>Add Task</a>
<ul id='list'>
</ul>

CSS

h1 {
    font-size: 1.5em;
}
ul {
    padding: 10px;
}
.done {
    text-decoration: line-through;
}

JavaScript

function appendTaskToList(val) {
    $('#list').append("<li>" + val + "  <a href='#' class='done-btn'>Done</a> <a href='#' class='cancel-btn'>Cancel Task</a></li>");
}


if (localStorage['tasks']) {
    var tasks = JSON.parse(localStorage['tasks']);
}else {
    var tasks = [];
}

for(var i=0;i<tasks.length;i++) {
    appendTaskToList(tasks[i]);
}

var addTask = function(){
    // get value from #name input
    var val = $('#name').val();
    
    // add the task to the array
    tasks.push(val);
    
    // save to local storage
    localStorage["tasks"] = JSON.stringify(tasks);
    
    // append the name to the list
    appendTaskToList(val);
    
    // reset the input field and focus it.
    $('#name').val("").focus();
}

$('#add-btn').click(addTask);

$('#name').keyup(function(e){
    if (e.keyCode === 13) {
        addTask();
    }
});


// approach 1
/*$('.done-btn').click(function(){
    $(this).parent('li').addClass('done');
});*/

// correct approach
$('.done-btn').live( 'click', function() {
  $(this).parent('li').addClass('done');
});    
    
$('.cancel-btn').live( 'click', function() {
  $(this).parent('li').fadeOut();
});