Shopping List Implementation

tsb15104 · Jan 29, 2020 · 523544c · 523544c
1 parent 9d44948
commit 523544c
Showing 1 changed file with 61 additions and 13 deletions.
diff --git a/week-2/index.html b/week-2/index.html
@@ -18,6 +18,10 @@
         li{
             padding: 0.5em;
         }
+
+        input:checked + span{
+            text-decoration: line-through;
+        }
     </style>
 </head>
 <body>
@@ -26,24 +30,68 @@
 
     <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 initItems = ['Milk', 'Cookies'];
+        let allItems = [];
+
+        addBtn.addEventListener('click', addItem);
+
+        function arrayRemove(arr, value) {
+
+            return arr.filter(function(ele){
+                return ele != value;
+            });
+
+        }
+
+        function addItem(value){
+            if(typeof value == 'string'){
+                item = value;
+            }
+            else{
+                item = inputBox.value;
+            }
+
+            let li = document.createElement('li');
+            li.className = "list-item";
+
+            let input = document.createElement('input');
+            input.type = "checkbox";
+            input.name = "items";
+
+            let span = document.createElement('span');
+            span.innerText = item;
+
+            let a = document.createElement('a');
+            a.innerText = "x";
+            a.href = "";
+            a.addEventListener('click',function(event){
+                event.preventDefault();
+                this.parentNode.remove();
+                allItems = arrayRemove(allItems, this.previousSibling.innerText);
+            });
+
+            li.appendChild(input);
+            li.appendChild(span);
+            li.appendChild(a);
+            allItems.push(item);
+
+            list.appendChild(li);
+
+            inputBox.value = "";
+            inputBox.focus();
+
+            console.log(allItems);
+        }
 
-        addBtn.addEventListener('click',function(){
-            console.log('button clicked', inputBox.value);
+        initItems.forEach(element => {
+            addItem(element);
         });
 
     </script>