Week 4 Submission (Firestore Shopping List)

tsb15104 · Feb 16, 2020 · 9dc437b · 9dc437b
1 parent 82c2a73
commit 9dc437b
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 0 deletions.
diff --git a/week-4/css/style.css b/week-4/css/style.css
@@ -0,0 +1,28 @@
+header{
+    background-color: midnightblue;
+    padding: 50px;
+    color: lightgray;
+}
+
+body{
+    background-color: lightgray;
+    margin: 0px;
+}
+
+h1{
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+a{
+    text-decoration: none;
+    color: red;
+    padding-left: 5px;
+}
+
+ul{
+    padding: 10px 50px 50px 50px;
+}
+
+li{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
diff --git a/week-4/firestore.html b/week-4/firestore.html
@@ -0,0 +1,130 @@
+<!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: 0px;
+            padding: 0px;
+            list-style-type: none;
+        }
+        li{
+            padding: 0.5em;
+        }
+
+        input:checked + span{
+            text-decoration: line-through;
+        }
+    </style>
+    <link rel = "stylesheet"
+    type = "text/css"
+    href = "css/style.css" />
+</head>
+<body>
+    <header>
+    <h1>My Shopping List: <span id="listName"></span></h1>
+
+    <form action="" id="shoppingForm">
+        <input type="text" name="item" id="item"> <button id="add">Add</button>
+    </form>
+    </header>
+
+    <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: "AIzaSyC9huTyd9kZDVjXYI1W2PF2AN09qSf-m4c",
+            authDomain: "dmdweb3.firebaseapp.com",
+            databaseURL: "https://dmdweb3.firebaseio.com",
+            projectId: "dmdweb3",
+            storageBucket: "dmdweb3.appspot.com",
+            messagingSenderId: "405866198414",
+            appId: "1:405866198414:web:e93a3d1ba732befe6420df"
+        });
+        var db = firebase.firestore();
+
+        var docRef = db.collection("shopping-list").doc("ZvpK1AHDzCnYavHi8n8I");
+
+        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 keyName = 'shopping-items';
+
+        shoppingForm.addEventListener('submit', function(event){
+            let item = inputBox.value;
+            docRef.update({
+                list: firebase.firestore.FieldValue.arrayUnion(item)
+            }).then(addItem(item));
+
+            event.preventDefault();
+        });
+
+        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) {
+                let item = this.previousSibling.innerText;
+                docRef.update({
+                    list: firebase.firestore.FieldValue.arrayRemove(item)
+                }).then(this.parentNode.remove());
+
+                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>