diff --git a/js/script.js b/js/script.js index e69de29..4f92875 100644 --- a/js/script.js +++ b/js/script.js @@ -0,0 +1,68 @@ +$(function(){ + + //list + $list = $('ul'); + + + // hide all elements of the list and fade them in + $('li').hide().each( function (i) { + $(this).delay(250 * i).fadeIn(1000); + }); + + //update item counter + function updateItemCounter(){ + var itemCount = $('li').length; + $('#counter').text(itemCount); + } + updateItemCounter(); + + // hide button and show button + $("#newItemButton").show(); + $('#newItemForm').hide(); + + $('#showForm').on('click', function () { + $("#newItemButton").hide(); + $('#newItemForm').show(); + }) + + // add new item + $('#add').on('click',function(e){ + e.preventDefault(); + var text = $('#itemDescription').val(); + var $newItem = $("
  • " +text+ "
  • "); + $newItem.on('click', function (){ + var $li = $(this); + completeItem($li); + }) + $list.append($newItem); + $('#itemDescription').val(""); + updateItemCounter(); + + $("#newItemButton").show(); + $('#newItemForm').hide(); + }) + + //remove items on click + $('li').on('click',function(){ + var $li = $(this); + completeItem($li); + + }) + + function completeItem ( $li ) { + //var $li = $(this); + if($li.hasClass('complete')) { + $li.animate({ + opacity: 0.0, + paddingLeft: '+= 180' + }, 500, 'swing', function() { + $li.remove(); + updateItemCounter(); + }); + } else { + $li.addClass('complete'); + $list.append($li).hide().fadeIn(200); + } + } + +}); \ No newline at end of file