From 143b56d64ff753ca009743bb5af573d6938519ed Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Sat, 11 Sep 2021 14:33:48 -0400
Subject: [PATCH] Create List maker project

---
 Chapter 14/List maker project | 65 +++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 Chapter 14/List maker project
diff --git a/Chapter 14/List maker project b/Chapter 14/List maker project
new file mode 100644
index 0000000..699c2ce
--- /dev/null
+++ b/Chapter 14/List maker project	
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>JavaScript List Project</title>
+</head>
+<body>
+    <div class="output"></div>
+    <input type="text"><button>add</button>
+    <script>
+        const output = document.querySelector(".output");
+        const myValue = document.querySelector("input");
+        const btn1 = document.querySelector("button");
+        const url = "list.json";
+        btn1.addEventListener("click", addToList);
+        let localData = localStorage.getItem("myList");
+        let myList = [];
+        window.addEventListener("DOMContentLoaded", () => {
+            output.textContent = "Loading......";
+            if (localData) {
+                myList = JSON.parse(localStorage.getItem("myList"));
+                output.innerHTML = "";
+                myList.forEach((el, index) => {
+                    maker(el);
+                });
+            } else {
+                reloader();
+            }
+        });
+
+        function addToList() {
+            if (myValue.value.length > 3) {
+                const myObj = {
+                    "name": myValue.value
+                }
+                myList.push(myObj);
+                maker(myObj);
+                savetoStorage();
+            }
+            myValue.value = "";
+        }
+
+        function savetoStorage() {
+            console.log(myList);
+            localStorage.setItem("myList", JSON.stringify(myList));
+        }
+
+        function reloader() {
+            fetch(url).then(rep => rep.json())
+                .then((data) => {
+                    myList = data;
+                    myList.forEach((el, index) => {
+                        maker(el);
+                    });
+                    savetoStorage();
+                })
+        }
+
+        function maker(el) {
+            const div = document.createElement("div");
+            div.innerHTML = `${el.name}`;
+            output.append(div);
+        }
+    </script>
+</body>
+</html>
