shopping list app changes

met18001 · Feb 12, 2020 · 07be3ba · 07be3ba
1 parent 06e7c29
commit 07be3ba
Show file tree

Hide file tree

Showing 2 changed files with 205 additions and 1 deletion.
diff --git a/week-2/color_picker.html b/week-2/color_picker.html
@@ -16,6 +16,7 @@
 <script>
     let picker = document.getElementById('head');
     let body = document.querySelector('body');
+    //can use keyname to set "color" as a variable
 
 picker.addEventListener('change', function(event){
     let hex = this.value;
@@ -31,7 +32,7 @@ window.addEventListener("load", function(event){
     localStorage.getItem("color", hex);
     console.log(localStorage.getItem("color", hex));
     body.style.backgroundColor = (localStorage.getItem("color", hex));
-
+    //picker.value = "color";
 });
 
 

diff --git a/week-4/firestore.html b/week-4/firestore.html
@@ -0,0 +1,203 @@
+<!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: <span id="listName"></span></h1>
+
+    <form action="" id="shoppingForm">
+        <input type="text" name="item" id="item"> <button id="add">Add</button>
+    </form>
+
+
+    <hr>
+
+    <ul id="shopping-list">
+
+    </ul>
+    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-firestore.js"></script>
+    <script>
+
+        // Initialize Cloud Firestore through Firebase
+        firebase.initializeApp({
+            apiKey: "AIzaSyBKiU2VOeD9Vwx4Fxt4_G1mbP-_pD-wHrk",
+            authDomain: "web3-3b002.firebaseapp.com",
+            databaseURL: "https://web3-3b002.firebaseio.com",
+            projectId: "web3-3b002",
+            storageBucket: "web3-3b002.appspot.com",
+            messagingSenderId: "45494778793",
+            appId: "1:45494778793:web:7cf73d66fd9ae2bfb1e2b8",
+            measurementId: "G-E35RWMSN0D"
+        });
+
+        var db = firebase.firestore();
+
+
+        var docRef = db.collection("shopping-lists").doc("OSjUoao3PR9BrMgQ8gjZ");
+            //get the document and THEN  run it 
+            //waiting for document to be fetched 
+            //.data returns object with all documents data 
+            docRef.get().then(function(doc) {
+                let name = doc.data().name;
+                let items = doc.data().list;
+                listName.innerText = name;
+
+                items.forEach(function(item){
+                    addItem(item);
+                })
+
+            }).catch(function(error) {
+                console.log("Error getting document:", error);
+            });     
+
+        const shoppingForm = document.getElementById('shoppingForm');
+        const inputBox = document.getElementById('item');
+        const list = document.getElementById('shopping-list');
+        const listName = document.querySelector("#listName")
+
+
+        shoppingForm.addEventListener('submit', function (event){
+            let item =inputBox.value;
+            docRef.update({
+            list: firebase.firestore.FieldValue.arrayUnion(item)
+            }).then(function(){
+
+            addItem(item);
+         });
+
+         event.preventDefault();
+        });
+        //docRef.ser({
+        //list: [item]
+        //}, {merge: true}
+
+       // var docRef = db.collection("shopping-lists").doc("list");
+        //docRef.update({
+        //regions: firebase.firestore.FieldValue.arrayUnion(item)
+//});
+           //try to add an item without erasing the entire list
+           //array.push
+
+
+
+        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){
+            let item = this.previousElementSibling.innerText;
+            let a = this;
+            docRef.update({
+             list: firebase.firestore.FieldValue.arrayRemove(item)
+            }).then( function() {
+                a.parentNode.remove();
+            })
+
+            event.preventDefault();
+
+        });
+
+
+
+
+            //this.parentNode.remove();
+            //console.log(this.previousElementSibling.innerText);
+            //Save all Items 
+            // Need to delete item from firebase
+
+
+
+        // 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;
+        }
+
+
+
+
+
+    </script>
+</body>
+</html>