From e0c6927201f9b0f6df1d9c9db76b3a938ebdd6f3 Mon Sep 17 00:00:00 2001
From: Brian Daley <brian.daley@uconn.edu>
Date: Mon, 3 Feb 2020 14:15:53 -0500
Subject: [PATCH] Storing data using localstorage

---
 .DS_Store             | Bin 0 -> 6148 bytes
 .vscode/settings.json |   3 ++
 week-3/firestore.html | 119 ++++++++++++++++++++++++++++++++++++++++++
 week-3/index.html     | 119 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 241 insertions(+)
 create mode 100644 .DS_Store
 create mode 100644 .vscode/settings.json
 create mode 100644 week-3/firestore.html
 create mode 100644 week-3/index.html
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..50bc23df062c68947e1f55a5176f3735b4eb8ee6
GIT binary patch
literal 6148
zcmeHK!Aj&n5bd5BHSI1EL2ws51Uz_gVbn#hVRSqRyBN`fx?@6u6E<`tlQD;3Aou}(
z!0y%6-%$4_{189Ds_q_P7(FT~RYUcwR996`zYg7L#u#sO!zIRS#+U_)SP{@XA=r;P
zA{FC7<f_Iuwh|PblORchk!W(fMFw!~##zB4`2A+X>vtcVBylIN*Y9|xS{oamu*9VJ
zET)7w^xA3R<$m7nH2kb(&v|he1%9>{hk1J^lFcMKjpUDP%g>{1AA@(&G=TtZ`@wD;
z6)k&aJ(am1%P3Rzbd7_(ScYlQNV_uZsCZLc*+2cf4Ryr4E3Xxw!V)cew%1#(FFLFB
zrT(JRTU!JB`^sv+FNF1VVRQRe_w4-7--~~jS2wqM5jecBN~R4C;6E5ce4KijOj3Ca
z{z1+lmXH`A28e<8%7EF=tWWQC0`$L$0b=0A7{L9(0Y!8TmKxR80S$gWVt)-01#G-a
zAUXzJgQZ630pU6oP^WTp#o#&}{Emrp4VD^pI^$|&sAERv=7z%6=-_u$IODEHYKZ}2
zV3>ibezfuYZ$5wjA5NktVt^R<Pz><ehPTmxDVei%WO8`cI-p0OC>U32d`tmD9mNof
eNAVX>CE$0^0CWwO8o>iX9|DR7YKVbXW#9p@Hene6

literal 0
HcmV?d00001

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/week-3/firestore.html b/week-3/firestore.html
new file mode 100644
index 0000000..7bbea19
--- /dev/null
+++ b/week-3/firestore.html
@@ -0,0 +1,119 @@
+<!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 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>
\ No newline at end of file
diff --git a/week-3/index.html b/week-3/index.html
new file mode 100644
index 0000000..7bbea19
--- /dev/null
+++ b/week-3/index.html
@@ -0,0 +1,119 @@
+<!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 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>
\ No newline at end of file
