changes to shopping app and adding firestore

met18001 · Feb 3, 2020 · c22fdea · c22fdea
1 parent da53c12
commit c22fdea
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 7 deletions.
diff --git a/week-2/firestore.html b/week-2/firestore.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My Shopping List App</title>
+    <style>
+        #item {
+            border: 1px solid #ccc;
+            font-size: 16px;
+        }
+        ul, li{
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+        }
+        li{
+            padding: .5em 0;
+        }
+
+        #shopping-list span{
+
+        }
+
+        input:checked + span{
+            text-decoration: line-through;
+        }
+    </style>
+</head>
+<body>
+    <h1>My Shopping List App</h1>
+
+    <input type="text" name="item" id="item"> <button id="add">Add</button>
+
+    <hr>
+
+    <ul id="shopping-list">
+
+    </ul>
+    <script>
+        const addBTn = document.getElementById('add');
+        const inputBox = document.getElementById('item');
+        const list = document.getElementById('shopping-list');
+        const keyName = 'shopping-items';
+        let allItems = JSON.parse(localStorage.getItem(keyName) );
+
+        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();
+            //Save all Items 
+            let allItems = getAllItems();
+            localStorage.setItem(keyName, JSON.stringify(allItems));
+            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);
+
+        //allItems.forEach(span => console.log());
+        //console.log(span.innerText);
+
+
+        //Queryselecterall - log text 
+        //span.innertext
+        // document.queryselectorall
+        //give span a class name 
+
+        };
+
+        function getAllItems(){
+            let items = document.querySelectorAll('.spanyo');
+            let itemsArray = [];
+        items.forEach(item => {
+            itemsArray.push(item.innerText);
+            })
+        return itemsArray;
+        }
+
+
+
+
+        allItems.forEach(element => {
+            console.log(element);
+            addItem(element);
+
+        });
+    </script>
+</body>
+</html>
diff --git a/week-2/index.html b/week-2/index.html
@@ -19,6 +19,10 @@
             padding: .5em 0;
         }
 
+        #shopping-list span{
+
+        }
+
         input:checked + span{
             text-decoration: line-through;
         }
@@ -38,7 +42,8 @@ <h1>My Shopping List App</h1>
         const addBTn = document.getElementById('add');
         const inputBox = document.getElementById('item');
         const list = document.getElementById('shopping-list');
-        let allItems =['Milk','Eggs', 'Bacon', 'Aloe Vera Stalks'];
+        const keyName = 'shopping-items';
+        let allItems = JSON.parse(localStorage.getItem(keyName) );
 
         addBTn.addEventListener('click', addItem);
 
@@ -72,6 +77,9 @@ <h1>My Shopping List App</h1>
         a.href = "";
         a.addEventListener('click',function(event){
             this.parentNode.remove();
+            //Save all Items 
+            let allItems = getAllItems();
+            localStorage.setItem(keyName, JSON.stringify(allItems));
             event.preventDefault();
         });
 
@@ -88,21 +96,31 @@ <h1>My Shopping List App</h1>
         inputBox.value = "";
         inputBox.focus();
 
-        const tags = document.querySelectorAll(".spanyo");
-        console.log(tags);
 
-        allItems.forEach(span => console.log());
-        console.log(span.innerText);
-
+
+        //const tags = document.querySelectorAll(".spanyo");
+        //console.log(tags);
+
+        //allItems.forEach(span => console.log());
+        //console.log(span.innerText);
 
-       
+
         //Queryselecterall - log text 
         //span.innertext
         // document.queryselectorall
         //give span a class name 
 
         };
 
+        function getAllItems(){
+            let items = document.querySelectorAll('.spanyo');
+            let itemsArray = [];
+        items.forEach(item => {
+            itemsArray.push(item.innerText);
+            })
+        return itemsArray;
+        }
+