merge Feature

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(
+      '<li>' +
+        '<span class="shopping-item">' + $("#shopping-list-entry").val() + '</span>' +
+        '<div class="shopping-item-controls">' +
+          '<button class="shopping-item-toggle">' +
+            '<span class="button-label">check</span>' +
+          '</button>' +
+          '<button class="shopping-item-delete">' +
+            '<span class="button-label">delete</span>' +
+          '</button>' +
+        '</div>' +
+      '</li>'
+    );
+    // 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');
+  });
+
+})

index.html

@@ -13,9 +13,9 @@
   <div class="container">
     <h1>Shopping List</h1>
 
-    <form>
-      <label for="shopping-list-item">Add an item</label>
-      <input type="text" name="shopping-list-item" id="shopping-list-item" placeholder="e.g., broccoli">
+    <form id="js-shopping-list-form">
+      <label for="shopping-list-entry">Add an item</label>
+      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
       <button type="submit">Add item</button>
     </form>
 
@@ -46,7 +46,7 @@ <h1>Shopping List</h1>
         <span class="shopping-item shopping-item__checked">milk</span>
         <div class="shopping-item-controls">
           <button class="shopping-item-toggle">
-            <span class="button-label">uncheck</span>
+            <span class="button-label">check</span>
           </button>
           <button class="shopping-item-delete">
             <span class="button-label">delete</span>
@@ -66,6 +66,7 @@ <h1>Shopping List</h1>
       </li>
     </ul>
   </div>
-
+  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
 </body>
 </html>