partial firebase implementation

tsb15104 · Feb 5, 2020 · 3fc8288 · 3fc8288
1 parent 523544c
commit 3fc8288
Show file tree

Hide file tree

Showing 2 changed files with 228 additions and 0 deletions.
diff --git a/week-3/firestore.html b/week-3/firestore.html
@@ -0,0 +1,129 @@
+<!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>
+</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 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) {
+            if (doc.exists) {
+                console.log("Document data:", doc.data());
+            } else {
+                // doc.data() will be undefined in this case
+                console.log("No such document!");
+            }
+        }).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 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 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();
+                // 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);
+            // Append our list item to the <ul>
+            list.appendChild(li);
+            inputBox.value = "";
+            inputBox.focus();
+            // Save All Items
+            let allItems = getAllItems();
+            localStorage.setItem(keyName, JSON.stringify(allItems));
+
+        }
+        allItems.forEach(element => {
+            addItem(element);
+        });
+        function getAllItems(){
+            let items = document.querySelectorAll("#shopping-list span");
+            let itemsArray = [];
+            items.forEach(item => {
+                itemsArray.push(item.innerText);
+            })
+            return itemsArray;
+        }
+
+    </script>
+</body>
+</html>
diff --git a/week-3/index.html b/week-3/index.html
@@ -0,0 +1,99 @@
+<!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>
+</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 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();
+                // 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);
+            // Append our list item to the <ul>
+            list.appendChild(li);
+            inputBox.value = "";
+            inputBox.focus();
+            // Save All Items
+            let allItems = getAllItems();
+            localStorage.setItem(keyName, JSON.stringify(allItems));
+
+        }
+        allItems.forEach(element => {
+            addItem(element);
+        });
+        function getAllItems(){
+            let items = document.querySelectorAll("#shopping-list span");
+            let itemsArray = [];
+            items.forEach(item => {
+                itemsArray.push(item.innerText);
+            })
+            return itemsArray;
+        }
+
+    </script>
+</body>
+</html>