more progress

bpd01001 · Jan 29, 2020 · a9f758f · a9f758f
1 parent 0a4373f
commit a9f758f
Showing 1 changed file with 58 additions and 13 deletions.
diff --git 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>