diff --git a/index.html b/index.html
index fa08eb38..6468585c 100644
--- a/index.html
+++ b/index.html
@@ -66,6 +66,10 @@ <h1>Shopping List</h1>
       </li>
     </ul>
   </div>
-
+  <script
+  src="https://code.jquery.com/jquery-3.5.1.js"
+  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
+  crossorigin="anonymous"></script>
+  <script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..874dbf49
--- /dev/null
+++ b/index.js
@@ -0,0 +1,42 @@
+/* eslint-disable no-undef */
+'use strict';
+
+function addItem() {
+  $('#js-shopping-list-form').submit( event => {
+    event.preventDefault();
+    const newItem = $(event.currentTarget).find('input[name="shopping-list-entry"]').val();
+    const newItemHTML = 
+      `<li>
+        <span class="shopping-item">${newItem}</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').append(newItemHTML);
+  });
+}
+
+function checkItem() {
+  $('.shopping-list').on('click', '.shopping-item-toggle', function() {
+    $(this).closest('li').find('.shopping-item').toggleClass('shopping-item__checked');
+  });
+}
+
+function removeItem() {
+  $('.shopping-list').on('click', '.shopping-item-delete', function() {
+    $(this).closest('li').remove();
+  });
+}
+
+function main() {
+  addItem();
+  checkItem();
+  removeItem();
+}
+
+$(main);
\ No newline at end of file