changes to shopping app

met18001 · Feb 2, 2020 · 8932fbf · 8932fbf
1 parent 12278e6
commit 8932fbf
Showing 1 changed file with 77 additions and 14 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,25 +31,84 @@ <h1>My Shopping List App</h1>
 
     <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','Eggs', 'Bacon', 'Aloe Vera Stalks'];
+
+        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 input element 
+        let input = document.createElement('input')
+        input.type = "checkbox";
+        input.name = "items";
+
+        //Create Span tag
+        let span = document.createElement('span');
+        span.innerText = item;
+        span.className ="spanyo";
+
+        //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);
+
+        console.log(li);
+
+        list.appendChild(li);
+
+
+        inputBox.value = "";
+        inputBox.focus();
+
+        const tags = document.querySelectorAll(".spanyo");
+        console.log(tags);
+
+        const array1 = [span];
+        array1.forEach(element => console.log(element));
+
+
+        //Queryselecterall - log text 
+        //span.innertext
+        // document.queryselectorall
+        //give span a class name 
+
+        };
+
+
+
+
+        allItems.forEach(element => {
+            console.log(element);
+            addItem(element);
 
-        addBTn.addEventListener('click', function(){
-            console.log('buttonnclicked', inputBox.value);
         });
     </script>
 </body>