fix conflicts

Chapter 15/Exercise 15.1

@@ -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}`);
+    });
+})

Chapter 15/Project 1

@@ -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"
+    }
+]

Chapter 15/Project 2

@@ -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>

Chapter 15/ch15-ajax.html

@@ -0,0 +1,22 @@
+<html>
+  <head> </head>
+  <body>
+    <div id="content">
+      <h1>AJAX in action!</h1>
+      <button type="button" onclick="call()">Go go greek God!</button>
+    </div>
+    <script>
+      function call() {
+        let xhttp = new XMLHttpRequest();
+        let url = "some valid url";
+        xhttp.load = function () {
+          if (this.status == 200 && this.readyState == 4) {
+            document.getElementById("content").innerHTML = this.responseText;
+          }
+        };
+        xhttp.open("GET", url, true);
+        xhttp.send();
+      }
+    </script>
+  </body>
+</html>

Chapter 15/ch15-example-json.json

@@ -0,0 +1,13 @@
+{
+  "name": "Malika",
+  "age": 50,
+  "profession": "programmer",
+  "languages": ["JavaScript", "C#", "Python"],
+  "address": {
+    "street": "Some street",
+    "number": 123,
+    "zipcode": "3850AA",
+    "city": "Utrecht",
+    "country": "The Netherlands"
+  }
+}

Chapter 15/ch15-express.js

@@ -0,0 +1,10 @@
+const express = require('express');
+const app = express();
+
+app.get('/', (request, response) => {
+  response.send('Hello Express!');
+});
+
+app.listen(3000, () => {
+  console.log('Express app at http://localhost:3000');
+});

Chapter 15/ch15-jquery.html

@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  </head>
+  <body>
+    <p>Let's play a game!</p>
+    <p>Of hide and seek...</p>
+    <p class="easy">I'm easy to find!</p>
+    <button id="hidebutton">Great idea</button>
+    <button id="revealbutton">Found you!</button>
+    <script>
+      $(document).ready(function () {
+        $("#hidebutton").click(function () {
+          $("p").hide();
+        });
+        $("#revealbutton").click(function () {
+          $(".easy").show();
+        });
+      });
+    </script>
+  </body>
+</html>

Chapter 15/ch15-node.js

@@ -0,0 +1,11 @@
+const http = require('http');
+
+http.createServer(function(req, res){
+    res.writeHead(200, {'Content-Type': 'text/html'}); //header status code
+    let name = 'maaike';
+    res.write(`Finally, hello ${name}`); //body
+    res.end();
+}).listen(5000); //listen to port 8080
+
+console.log('Listening on port 8080...');
+

Chapter 15/ch15-vue-component.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
+  <body>
+    <div id="app">
+      <maaike></maaike>
+    </div>
+
+    <script>
+      Vue.component("maaike", {
+        template: "<p>Maaike says: good job!</p>",
+      });
+
+      new Vue({ el: "#app" });
+    </script>
+  </body>
+</html>

Chapter 15/ch15-vue.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
+  <body>
+    <div id="app">
+      <p v-if="!hide">
+        Let's play hide and seek. <br />
+        Go to the console and type: <br />
+        obj._data.hide = true <br />
+      </p>
+    </div>
+
+    <script>
+      var obj = new Vue({
+        el: "#app",
+        data: {
+          hide: false,
+        },
+      });
+    </script>
+  </body>
+</html>

Chapter 15/ch15_exampled3.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        svg {
+            background-color: lightgrey;
+        }
+    </style>
+</head>
+<body>
+    <svg id="drawing-area" height=100 width=500></svg>
+    <script>
+        let svg = d3.select("#drawing-area");
+        svg.append("circle")
+            .attr("cx", 100).attr("cy", 50).attr("r", 20).style("fill", "pink");
+        svg.append("circle")
+            .attr("cx", 200).attr("cy", 20).attr("r", 20).style("fill", "black");
+        svg.append("circle")
+            .attr("cx", 300).attr("cy", 70).attr("r", 20).style("fill", "grey");
+    </script>
+</body>
+
+</html>

Chapter 15/ch15_examplereact.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script>
+        let p = React.createElement("p", null, "Hi Emile, what's up?");
+        ReactDOM.render(
+            p,
+            document.getElementById("root")
+        );
+    </script>
+</body>
+
+</html>

Chapter 15/ch15_exampleunderscore.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js
+    "></script>
+</head>
+
+<body>
+    <script>
+        _.each([1, 2, 3], alert);
+    </script>
+</body>
+
+</html>