diff --git a/index.html b/index.html
index fa08eb38..1298dfdd 100644
--- a/index.html
+++ b/index.html
@@ -66,6 +66,7 @@ <h1>Shopping List</h1>
       </li>
     </ul>
   </div>
-
+  <script src="https://code.jquery.com/jquery.min.js"></script>
+  <script type="text/javascript" src="index.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..1a57fd4f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,32 @@
+$(function(){
+  
+  $('#js-shopping-list-form').submit(function(event) {
+  
+    event.preventDefault();
+  
+    const listItem = $('.js-shopping-list-entry').val();
+  
+    $('.js-shopping-list-entry').val('');
+  
+   $('.shopping-list').append(
+      `<li>
+        <span class="shopping-item">${listItem}</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>`);
+  });
+  
+  $('.shopping-list').on('click', '.shopping-item-toggle', function(event) {
+    $(this).closest('li').find('.shopping-item').toggleClass('shopping-item__checked');
+  });
+  
+  $('.shopping-list').on('click', '.shopping-item-delete', function(event) {
+    $(this).closest('li').remove();
+  });
+});