From 04d531a0d39217e31cff549c1fea6f6666c7e765 Mon Sep 17 00:00:00 2001 From: jllrk1 Date: Wed, 10 Feb 2016 20:16:36 -0600 Subject: [PATCH] changes made JL 02102016 --- js/script.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/js/script.js b/js/script.js index e69de29..625f804 100644 --- a/js/script.js +++ b/js/script.js @@ -0,0 +1,75 @@ +$(function(){ + // cache the ul that holds the list + $list = $("ul"); + + //Hide all items and fade them in one at a time + $("li").hide().each( function(i) { + $(this).delay(450 * i).fadeIn(1600); + + }); + + //Update the item counter + function updateItemCount() { + var itemCount = $("li").length; + $("#counter").text(itemCount); + + } + + // Call the funcgtion defined above to update the initial item count + updateItemCount(); + + //Add ability to add a new item to the list + $("#newItemButton").show(); + $("#newItemForm").hide(); + + $("#showForm").on("click", function() { + $("#newItemButton").hide(); + $("#newItemForm").show(); + }); + + // Build the new list item and add it when we click add + $("#add").on("click", function(e) { + // prevent the form submit from refreshing the page + e.preventDefault(); + + //get the text for the item to add, then build/add new li + var text = $("#itemDescription").val(); + var $newItem = $("
  • " + text + "
  • "); + $newItem.on("click", function() { + var $li = $(this); + completeItem($li); + + }) + $list.append($newItem); + $("#itemDescription").val(""); + + // update the counter and reset the form display + updateItemCount(); + $("#newItemForm").hide(); + $("#newItemButton").show(); + }); + // Add click handler so that we can grey out the list items as they are done + $("li").on("click", function() { + var $li = $(this); + completeItem($li); + }); + + // Name our click handler function so we can add it to new items + function completeItem ( $li ) { + //Need to see first if it was already complete + if ($li.hasClass("complete")) { + $li.animate({ + opacity: 0.0, + paddingLeft: '+= 180' + }, 500, 'swing', function (){ + $li.remove(); + updateItemCount(); + }); + } else { + $li.addClass("complete"); + $list.append($li).hide().fadeIn(300); + } + } + + }); +