diff --git a/app.js b/app.js new file mode 100644 index 00000000..5a2a868f --- /dev/null +++ b/app.js @@ -0,0 +1,42 @@ +$(document).ready(function() { + + // logic for adding an item to shopping list + $('#js-shopping-list-form').submit(function(event) { + // stops default browser behavior for form submission, + // since we don't actually want to submit to server + event.preventDefault(); + + // add new item to bottom of list + $('.shopping-list').append( + '
  • ' + + '' + $("#shopping-list-entry").val() + '' + + '
    ' + + '' + + '' + + '
    ' + + '
  • ' + ); + // remove the submitted item from the form input + $(this)[0].reset(); + }); + + // logic for deleting items from list + $('.shopping-list').on('click', '.shopping-item-delete', function(){ + // here `this` refers to the `.shopping-item-delete` element that was clicked. + // we travel up the document tree to get the nearest parent element + // that"s an `li` + $(this).closest('li').remove(); + }); + + // logic for checking/unchecking items + $('.shopping-list').on('click', '.shopping-item-toggle', function(){ + + // toggle the .shopping-item__checked class + $(this).closest('li').find('.shopping-item').toggleClass('shopping-item__checked'); + }); + +}) diff --git a/index.html b/index.html index 17eed56c..a6f0e276 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,9 @@

    Shopping List

    -
    - - + + +
    @@ -46,7 +46,7 @@

    Shopping List

    milk
    - + + \ No newline at end of file