renamed

2021-11-25 20:25:10 +05:30
parent 67969b4bce
commit 65c4b167af
8 changed files with 122 additions and 1 deletions
@@ -0,0 +1,18 @@
+[
+    {
+        "name": "Learn JavaScript",
+        "status" : true
+    },
+    {
+        "name": "Try JSON",
+        "status" : false
+    }
+]
+
+const url = "list.json";
+fetch(url).then(rep => rep.json())
+.then((data) => {
+    data.forEach((el) => {
+        console.log(`${el.name} = ${el.status}`);
+    });
+})
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head><title>Project 14</title></head>
+    <body>
+        <script src="myscript.js"></script>
+    </body>
+</html>
+
+// myscript.js
+let url = "people.json";
+fetch(url)
+.then(response => response.json())
+.then(data => {
+    console.log(data);
+    data.forEach(person => {
+        console.log(`${person.first} ${person.last} - ${person.topic}`);
+    });
+});
+
+
+// people.json 
+[
+    {
+        "first": "Laurence",
+        "last": "Svekis",
+        "topic": "JavaScript"
+    },
+    {
+        "first": "John",
+        "last": "Smith",
+        "topic": "HTML"
+    },
+    {
+        "first": "Jane",
+        "last": "Doe",
+        "topic": "CSS"
+    }
+]
@@ -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>