From 47f8023b7ab0b11cf1fcdc7f57bcc1a0fa50e5bf Mon Sep 17 00:00:00 2001 From: Dorah Date: Thu, 7 Mar 2019 22:26:14 -0600 Subject: [PATCH 1/4] added jq file and shopping list code (add,check,delete) --- index.html | 6 +++++- index.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 index.js diff --git a/index.html b/index.html index fa08eb38..2a275dc1 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Shopping List

- +
@@ -66,6 +66,10 @@

Shopping List

+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..6cc1050a --- /dev/null +++ b/index.js @@ -0,0 +1,47 @@ +/*ADD ITEMS TO LIST +Remember to append elements with input value */ +$('#js-shopping-list-form button').click(function(event){ + //prevent pg from disappearing + event.preventDefault(); + + const inputItem = $('#shopping-list-entry').val(); + //alert(inputItem); + + + //add inputItem to list with proper div and buttons etc + //reminder** space between span buttons of check and delete provides a space on webpg + $('.shopping-list').append(`
  • ${inputItem}
    • `); +}); + +/* ******CODE CHECK(TOGGLE) FUNCTION**** +Keep in mind event delegation when coding the check and delete button functions. +-want to use .onClick vs .click because .on works well with dynamically added items(items that did not come in with the original code [what the above code does]). .click doesn't work with newly added items unless you bind it to them(I don't know bind yet..) +.on( events [, selector ] [, data ], handler ) +-click is the event +-selector is what it will be working on(?) the descendants +-data-? I am unsure for now +-handler is the function to be carried out + +**** +I had issues getting the particular check button to crossout the added item. added knowledge.. + +1.) .closest() **begins** with the current element**aka it begins with itself**- and travels up the DOM until finds match for the supplied selector + e.g $( "li.item-a" ).closest( "ul" ).css( "background-color", "red" ); + -this starts looking at 'li.item-a' and goes up to find the 'ul' closest to it. gives it a red background + -if .closest('li') then it will highlight itself. +2.) event.target vs event.currentTarget + a.) e.target the one that triggered(aka received) the event-the one clicked on + b.)e.currentTarget: the object listening for the event +*/ + +$('.shopping-list').on('click','.shopping-item-toggle', event=>{ + //alert('check clicked!');//let's me know if the button has been clicked + $(event.target).closest('span').toggleClass('shopping-item__checked');//Woohoo! +}); + +/* ******CODE CHECK(TOGGLE) AND DELETE BUTTON FUNCTIONS***** */ + +$('.shopping-list').on('click','.shopping-item-delete', event=>{ + //alert('delete clicked!'); + $(event.target).closest('li').remove(); + }); \ No newline at end of file From f6befbe2c359f67ed3f46694c04d1910e47a0bf0 Mon Sep 17 00:00:00 2001 From: Dorah Date: Thu, 7 Mar 2019 22:28:20 -0600 Subject: [PATCH 2/4] fixed broccoli deletion in input --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 2a275dc1..48107dbc 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

    Shopping List

    - +
    From b903a5d250a8ca8593062b39a46b07a97e409b6e Mon Sep 17 00:00:00 2001 From: Dorah Date: Fri, 8 Mar 2019 00:24:59 -0600 Subject: [PATCH 3/4] fixed check button --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 6cc1050a..54d145a8 100644 --- a/index.js +++ b/index.js @@ -36,7 +36,7 @@ I had issues getting the particular check button to crossout the added item. add $('.shopping-list').on('click','.shopping-item-toggle', event=>{ //alert('check clicked!');//let's me know if the button has been clicked - $(event.target).closest('span').toggleClass('shopping-item__checked');//Woohoo! + $(event.target).closest('li').find('.shopping-item').toggleClass('shopping-item__checked');//Woohoo! }); /* ******CODE CHECK(TOGGLE) AND DELETE BUTTON FUNCTIONS***** */ From 700f85f216758aad79a6487b21281c69bb144741 Mon Sep 17 00:00:00 2001 From: Dorah Date: Fri, 8 Mar 2019 00:34:14 -0600 Subject: [PATCH 4/4] stopped empty string input entries --- index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 54d145a8..64d35020 100644 --- a/index.js +++ b/index.js @@ -7,10 +7,14 @@ $('#js-shopping-list-form button').click(function(event){ const inputItem = $('#shopping-list-entry').val(); //alert(inputItem); - + //creating an if statement to prevent empty strings from being inserted. as they have been + if(inputItem ===''){ + alert('Please add an item'); + } else{ //add inputItem to list with proper div and buttons etc //reminder** space between span buttons of check and delete provides a space on webpg $('.shopping-list').append(`
  • ${inputItem}
    • `); + }; }); /* ******CODE CHECK(TOGGLE) FUNCTION**** @@ -36,6 +40,11 @@ I had issues getting the particular check button to crossout the added item. add $('.shopping-list').on('click','.shopping-item-toggle', event=>{ //alert('check clicked!');//let's me know if the button has been clicked + /*a couple of problems. initially had code as: + $(event.target).closest('span').toggleClass('shopping-item__checked'); + it didn't work. would cross out the check button's text instead. which is weird b/c .closest() should bubble up not go down to it's child. ???is span not considered a child???? any way eventually used .find() **warning: find gets all descendants that match element. be specific where you can.** so i called 'li' with .closest() and then found span by it's class .shopping-item. it worked. +*/ + $(event.target).closest('li').find('.shopping-item').toggleClass('shopping-item__checked');//Woohoo! });