From a9f758f9039e33cfe13c9bfd424631591d62428a Mon Sep 17 00:00:00 2001
From: Brian Daley <brian.daley@uconn.edu>
Date: Wed, 29 Jan 2020 14:31:49 -0500
Subject: [PATCH] more progress

---
 week-2/index.html | 71 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 58 insertions(+), 13 deletions(-)
diff --git a/week-2/index.html b/week-2/index.html
index f51fd5e..c2eebaf 100644
--- a/week-2/index.html
+++ b/week-2/index.html
@@ -18,6 +18,10 @@
         li{ 
             padding: .5em 0;
         }
+
+        input:checked + span {
+            text-decoration: line-through;
+        }
     </style>
 </head>
 <body>
@@ -27,26 +31,67 @@
 
     <hr>
 
-    <ul>
-        <li>
-            <input type="checkbox" name="items">
-            Milk
-            <a href="">x</a>
-        </li>
-        <li>
-            <input type="checkbox" name="items">
-            Cookies
-            <a href="">x</a>
-        </li>
+    <ul id="shopping-list">
+
     </ul>
     <script>
         const addBtn = document.getElementById('add');
         const inputBox = document.getElementById('item');
+        const list = document.getElementById('shopping-list');
+        let allItems = [ 'Milk', 'Dog food', 'Cookies', 'apples', 'bread' ];
 
         
-        addBtn.addEventListener('click', function(){
-            console.log('button clicked', inputBox.value);
+        addBtn.addEventListener('click', addItem);
+
+        function addItem(arg){
+
+            if(typeof arg === 'string'){
+                item = arg;
+            }else{
+                item = inputBox.value;
+            }
+            
+            // Create list item
+            let li = document.createElement('li');
+            li.className = "list-item";
+
+            // Create an input element
+            let input = document.createElement('input');
+            input.type = "checkbox";
+            input.name = "items";
+
+            // Create a span element
+            let span = document.createElement('span');
+            span.innerText = item;
+
+            // Create an anchor
+            let a = document.createElement('a');
+            a.innerText = "x";
+            a.href = "";
+            a.addEventListener('click', function (event) {
+                this.parentNode.remove();
+                event.preventDefault();
+            });
+
+            // Append each element to our list item
+            li.appendChild(input);
+            li.appendChild(span);
+            li.appendChild(a);
+
+            // Append our list item to the <ul>
+            list.appendChild(li);
+
+
+            inputBox.value = "";
+            inputBox.focus();
+        }
+
+        allItems.forEach(element => {
+            addItem(element);
         });
+
+
+
     </script>
 </body>
 </html>
\ No newline at end of file
