tryng to add with firestore

bpd01001 · Feb 10, 2020 · 050d650 · 050d650
1 parent 16e861d
commit 050d650
Showing 1 changed file with 183 additions and 0 deletions.
diff --git a/week-4/firestore.html b/week-4/firestore.html
@@ -0,0 +1,183 @@
+<!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;
+        }
+
+
+        input:checked + span {
+            text-decoration: line-through;
+        }
+    </style>
+</head>
+<body>
+    <h1>My Shopping List: <span id="listName"></span></h1>
+
+    <input type="text" name="item" id="item"> <button id="add">Add</button>
+
+    <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: "AIzaSyBi03NBONZ2ncp4PSvjbAplWm6pC5XnjTw",
+            authDomain: "dmd-4470.firebaseapp.com",
+            databaseURL: "https://dmd-4470.firebaseio.com",
+            projectId: "dmd-4470",
+            storageBucket: "dmd-4470.appspot.com",
+            messagingSenderId: "159373794744",
+            appId: "1:159373794744:web:ca93db7d63c296b472834d"
+        });
+        var db = firebase.firestore();
+
+
+        var docRef = db.collection("shopping-lists").doc("mnTUo37Vem1NO2n7CptX");
+
+            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 addBtn = document.getElementById('add');
+        const inputBox = document.getElementById('item');
+        const list = document.getElementById('shopping-list');
+        const listName = document.querySelector("#listName");
+
+
+
+        addBtn.addEventListener('click', function (){
+            if (typeof arg === 'string') {
+                item = arg;
+            } else {
+                item = inputBox.value;
+            }
+
+            // docRef.set({
+            //     list: [item]
+            // }, { merge: true });
+
+            // 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();
+
+                // Need to delete item from Firebase
+
+                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();
+
+        });
+
+        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();
+
+                // Need to delete item from Firebase
+
+                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();
+
+
+        }
+
+
+
+    </script>
+</body>
+</html>