Storing data using localstorage

bpd01001 · Feb 3, 2020 · e0c6927 · e0c6927
1 parent 29f6374
commit e0c6927
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/week-3/firestore.html 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>
diff --git a/week-3/index.html 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>