// This is where I put my functions

​

// This function adds items on our list

function addListItem() {

​

​

​

    var text=$('#newText').val();  // val returns any text thats inside input

    $('#todoList').append('<li><input type="checkbox" class="done">'+ text +'<button class="delete">Delete</button></li>');

​

    // This adds list items to our local storage

    localStorage.setItem("todolist", $('#todoList').html());

​

    $('#newText').val(''); // this is added so that our input deletes previous text when add is clicked

};

​

// This function deletes items on our list

function deleteListItem() {

    // In order to delete entire list item we have to use parent method > without parent method we would only delete our delete button

    $(this).parent().fadeOut(1000, function(){

        $(this).remove();

    });

​

    // This deletes list items in our local storage

    localStorage.removeItem("todolist", $('#todoList').html());

​

    // Code below doesn't work because I used parent x2 and therefore used it on my <ul>

    // $(this).parent().fadeOut(1000, function(){

    //  $(this).parent().remove();

    // })

​

    // $(this).parent().remove(); > this was code without fade effect

};

​

// This function adds checked remark on our item list

function itemDone() { 

    // First we check if our element has textDecoration="line-through"

    // If it has it second line deletes it

    // And our else statement allows as to add it again

    if ($(this).parent().css('textDecoration') == 'line-through') {

        $(this).parent().css('textDecoration', 'none');

    }   else {

        $(this).parent().css('textDecoration', 'line-through');

    }   

}

​

​

$ (document).ready(function(){

    if (localStorage.getItem("todolist") != null) {

      $('#todoList').html(localStorage.getItem("todolist")); // This reads items in our local storage

    }

​

    $('#add').on('click', addListItem); // This is for button to add text

​

    // This part enables us to add text on pressing enter key

    $( "#newText" ).keypress(function( event ) {

        if ( event.which == 13) {

            addListItem();

        }

    });

​

​

    // $('.delete').on('click', deleteListItem);

    // $('.done').on('click', itemDone);

​

    // Lines above don't work because we are adding elements after page loads

    // In above lines browser didn't bind functions to our new elements because it didn't see them at the time

    // In order to make it work we add document selector > its not the best solution but i'm not good enough for better 

    // We don't need to do it for #add because its already on page

    $(document).on('click', '.delete', deleteListItem);

    $(document).on('click', '.done', itemDone);

​

});