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>