From 6e1df7995f8e0c25e3820abddd9febbc08748c70 Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Fri, 19 Nov 2021 22:45:48 +0100
Subject: [PATCH] restructured last chapters

---
 chapter13/eventloop-async.js                  |   7 ++
 chapter13/eventloop-sync.js                   |   6 ++
 chapter14/bouncing ball                       |  46 ++++++++
 chapter14/canvas image uploader               |  43 ++++++++
 chapter14/canvas rectangle                    |  27 +++++
 chapter14/canvas stickman                     |  54 ++++++++++
 chapter14/canvas text                         |  32 ++++++
 .../ch14-browser-supporting-file-reader.html  |  13 +++
 chapter14/ch14-canvas-animation.html          |  42 ++++++++
 chapter14/ch14-canvas-circle.html             |  21 ++++
 chapter14/ch14-canvas-draw-mouse.html         |  63 +++++++++++
 chapter14/ch14-canvas-drawing-canvas.html     |  31 ++++++
 chapter14/ch14-canvas-lines.html              |  23 ++++
 chapter14/ch14-canvas-save-image.html         |  34 ++++++
 chapter14/ch14-canvas-saving-image.html       |  38 +++++++
 chapter14/ch14-canvas-text.html               |  21 ++++
 .../ch14-canvas-upload-image.html             |   0
 chapter14/ch14-canvas.html                    |  20 ++++
 chapter14/ch14-drawing-image.html             |  23 ++++
 chapter14/ch14-geo-getlocation.html           |  15 +++
 chapter14/ch14-inspect-geo.html               |  11 ++
 chapter14/ch14-localstorage.html              |  14 +++
 chapter14/ch14-media.html                     |  18 ++++
 chapter14/ch14-reading-file.html              |  17 +++
 chapter14/ch14-upload-file.html               |  14 +++
 chapter14/ch14-upload-files.html              |  15 +++
 chapter14/ch14.js                             |   6 ++
 chapter14/countdown timer                     | 101 ++++++++++++++++++
 chapter14/draw on canvas                      |  91 ++++++++++++++++
 chapter14/ex1 Image Thumbnails                |  37 +++++++
 chapter14/ex1 Image preview                   |  37 +++++++
 chapter14/flower.jpg                          | Bin 0 -> 4892 bytes
 chapter14/matrix effect                       |  44 ++++++++
 chapter14/task List                           |  79 ++++++++++++++
 chapter15/ch15-ajax.html                      |  22 ++++
 chapter15/ch15-example-json.json              |  13 +++
 chapter15/ch15-express.js                     |  10 ++
 chapter15/ch15-jquery.html                    |  22 ++++
 chapter15/ch15-node.js                        |  11 ++
 chapter15/ch15-vue-component.html             |  18 ++++
 chapter15/ch15-vue.html                       |  23 ++++
 chapter15/exampled3.html                      |  24 +++++
 chapter15/examplereact.html                   |  20 ++++
 chapter15/exampleunderscore.html              |  15 +++
 chapter9/ch9-accessing.html                   |   3 +
 chapter9/ch9-domflow.html                     |   2 +-
 46 files changed, 1225 insertions(+), 1 deletion(-)
 create mode 100644 chapter13/eventloop-async.js
 create mode 100644 chapter13/eventloop-sync.js
 create mode 100644 chapter14/bouncing ball
 create mode 100644 chapter14/canvas image uploader
 create mode 100644 chapter14/canvas rectangle
 create mode 100644 chapter14/canvas stickman
 create mode 100644 chapter14/canvas text
 create mode 100755 chapter14/ch14-browser-supporting-file-reader.html
 create mode 100755 chapter14/ch14-canvas-animation.html
 create mode 100755 chapter14/ch14-canvas-circle.html
 create mode 100755 chapter14/ch14-canvas-draw-mouse.html
 create mode 100755 chapter14/ch14-canvas-drawing-canvas.html
 create mode 100755 chapter14/ch14-canvas-lines.html
 create mode 100755 chapter14/ch14-canvas-save-image.html
 create mode 100755 chapter14/ch14-canvas-saving-image.html
 create mode 100755 chapter14/ch14-canvas-text.html
 rename chapter9/ch9.js => chapter14/ch14-canvas-upload-image.html (100%)
 mode change 100755 => 100644
 create mode 100755 chapter14/ch14-canvas.html
 create mode 100755 chapter14/ch14-drawing-image.html
 create mode 100755 chapter14/ch14-geo-getlocation.html
 create mode 100755 chapter14/ch14-inspect-geo.html
 create mode 100755 chapter14/ch14-localstorage.html
 create mode 100755 chapter14/ch14-media.html
 create mode 100755 chapter14/ch14-reading-file.html
 create mode 100755 chapter14/ch14-upload-file.html
 create mode 100755 chapter14/ch14-upload-files.html
 create mode 100755 chapter14/ch14.js
 create mode 100644 chapter14/countdown timer
 create mode 100644 chapter14/draw on canvas
 create mode 100644 chapter14/ex1 Image Thumbnails
 create mode 100644 chapter14/ex1 Image preview
 create mode 100644 chapter14/flower.jpg
 create mode 100644 chapter14/matrix effect
 create mode 100644 chapter14/task List
 create mode 100755 chapter15/ch15-ajax.html
 create mode 100755 chapter15/ch15-example-json.json
 create mode 100755 chapter15/ch15-express.js
 create mode 100755 chapter15/ch15-jquery.html
 create mode 100755 chapter15/ch15-node.js
 create mode 100755 chapter15/ch15-vue-component.html
 create mode 100755 chapter15/ch15-vue.html
 create mode 100644 chapter15/exampled3.html
 create mode 100644 chapter15/examplereact.html
 create mode 100644 chapter15/exampleunderscore.html

diff --git a/chapter13/eventloop-async.js b/chapter13/eventloop-async.js
new file mode 100644
index 0000000..19f97fe
--- /dev/null
+++ b/chapter13/eventloop-async.js
@@ -0,0 +1,7 @@
+console.log("Hi there");
+setTimeout(() => console.log("Sorry I'm late"), 1000);
+console.log(add(4,5));
+
+function add(x, y) {
+    return x + y;
+}
\ No newline at end of file
diff --git a/chapter13/eventloop-sync.js b/chapter13/eventloop-sync.js
new file mode 100644
index 0000000..f904d71
--- /dev/null
+++ b/chapter13/eventloop-sync.js
@@ -0,0 +1,6 @@
+console.log("Hi there");
+add(4,5);
+
+function add(x, y) {
+    return x + y;
+}
\ No newline at end of file
diff --git a/chapter14/bouncing ball b/chapter14/bouncing ball
new file mode 100644
index 0000000..546f857
--- /dev/null
+++ b/chapter14/bouncing ball	
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+<div><canvas id="canvas"></canvas></div>
+<script>
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const ballSize = 10;
+let x = canvas.width/2;
+let y = canvas.height/2;
+let dirX = 1;
+let dirY = 1;
+function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, ballSize, 0, Math.PI*2);
+    ctx.fillStyle = "red";
+    ctx.fill();
+    ctx.closePath();
+}
+function move() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    if(x  > canvas.width-ballSize || x  < ballSize) {
+        dirX *= -1;
+    }
+    if(y > canvas.height-ballSize || y < ballSize) {
+        dirY *= -1;
+    }
+    x += dirX;
+    y += dirY;
+}
+setInterval(move, 10);
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/canvas image uploader b/chapter14/canvas image uploader
new file mode 100644
index 0000000..0d1c08c
--- /dev/null
+++ b/chapter14/canvas image uploader	
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <div><label>Image</label>
+        <input type="file" id="imgLoader" name="imgLoader">
+    </div>
+    <div><canvas id="canvas"></canvas></div>
+    <script>
+        const canvas = document.querySelector('#canvas');
+        const ctx = canvas.getContext('2d');
+        const imgLoader = document.querySelector('#imgLoader');
+        imgLoader.addEventListener('change', handleUpload);
+
+        function handleUpload(e) {
+            console.log(e);
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                console.log(e);
+                const img = new Image();
+                img.onload = function () {
+                    canvas.width = img.width / 2;
+                    canvas.height = img.height / 2;
+                    ctx.drawImage(img, 0, 0, img.width / 2, img.height / 2);
+                }
+                img.src = e.target.result;
+            }
+            reader.readAsDataURL(e.target.files[0]);
+        }
+
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/canvas rectangle b/chapter14/canvas rectangle
new file mode 100644
index 0000000..4f5e1cd
--- /dev/null
+++ b/chapter14/canvas rectangle	
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
+    <script>
+        const canvas = document.querySelector('#canvas');
+        const ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = "red";
+        ctx.fillRect(100, 100, 500, 300); //filled shape
+        ctx.strokeRect(90, 90, 520, 320); // outline
+        ctx.clearRect(150, 150, 400, 200);  //transparent
+
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/canvas stickman b/chapter14/canvas stickman
new file mode 100644
index 0000000..159bd3e
--- /dev/null
+++ b/chapter14/canvas stickman	
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
+    <script>
+        const canvas = document.querySelector('#canvas');
+        const ctx = canvas.getContext('2d');
+        ctx.beginPath();
+ctx.fillStyle = 'red';
+ctx.arc(300,130,100,0,Math.PI *2);
+ctx.fill();
+ctx.beginPath();
+ctx.fillStyle = 'black';
+ctx.arc(250,120,20,0,Math.PI *2);
+ctx.moveTo(370,120);
+ctx.arc(350,120,20,0,Math.PI *2);
+ctx.moveTo(240,160);
+ctx.arc(300,160,60,0,Math.PI);
+ctx.fill();
+ctx.moveTo(300,130);
+ctx.lineTo(300,150);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.moveTo(300,230);
+ctx.lineTo(300,270);
+ctx.lineTo(400,270);
+ctx.lineTo(200,270);
+ctx.lineTo(300,270);
+ctx.lineTo(300,350);
+ctx.lineTo(400,500);
+ctx.moveTo(300,350);
+ctx.lineTo(200,500);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.fillStyle = 'blue';
+ctx.moveTo(200,50);
+ctx.lineTo(400,50);
+ctx.lineTo(300,20);
+ctx.lineTo(200,50);
+ctx.fill();
+ctx.stroke();
+    </script>
diff --git a/chapter14/canvas text b/chapter14/canvas text
new file mode 100644
index 0000000..442965a
--- /dev/null
+++ b/chapter14/canvas text	
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
+    <script>
+        const canvas = document.querySelector('#canvas');
+        const ctx = canvas.getContext('2d');
+        const str = "Hello World";
+        ctx.font = 'italic 50px Comic';
+        ctx.fillStyle = 'blue';
+        //ctx.textAlign = 'left';
+        ctx.fillText(str, 100, 100);
+        ctx.font = 'bold 20px Arial';
+        ctx.fillStyle = 'red';
+        for (let x = 1; x < 11; x++) {
+            ctx.fillText("counter:" + x, 50, (200 + (40 * x)));
+        }
+
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/ch14-browser-supporting-file-reader.html b/chapter14/ch14-browser-supporting-file-reader.html
new file mode 100755
index 0000000..b7c63a0
--- /dev/null
+++ b/chapter14/ch14-browser-supporting-file-reader.html
@@ -0,0 +1,13 @@
+<html>
+  <body>
+    <div id="message"></div>
+    <script>
+      let message = document.getElementById("message");
+      if (window.FileReader) {
+        message.innerText = "Good to go!";
+      } else {
+        message.innerText = "No FileReader :(";
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-animation.html b/chapter14/ch14-canvas-animation.html
new file mode 100755
index 0000000..d40f0eb
--- /dev/null
+++ b/chapter14/ch14-canvas-animation.html
@@ -0,0 +1,42 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+
+  <body>
+    <canvas id="canvas"></canvas>
+    <script>
+      window.onload = init;
+      var canvas = document.getElementById("canvas");
+      var ctx = canvas.getContext("2d");
+      canvas.height = 500;
+      canvas.width = 500;
+      var pos = {
+        x: 0,
+        y: 50,
+      };
+
+      function init() {
+        draw();
+      }
+
+      function draw() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        pos.x = pos.x + 5;
+        if (pos.x > canvas.width) {
+          pos.x = 0;
+        }
+        if (pos.y > canvas.height) {
+          pos.y = 0;
+        }
+
+        ctx.fillRect(pos.x, pos.y, 100, 100);
+        window.setTimeout(draw, 50);
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-circle.html b/chapter14/ch14-canvas-circle.html
new file mode 100755
index 0000000..64ce4d7
--- /dev/null
+++ b/chapter14/ch14-canvas-circle.html
@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <style>
+      #canvas1 {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas1"></canvas>
+    <script>
+      let canvas = document.getElementById("canvas1");
+      let ctx = canvas.getContext("2d");
+      canvas.width = 150;
+      canvas.height = 200;
+      ctx.beginPath();
+      ctx.arc(75, 100, 50, 0, 2 * Math.PI);
+      ctx.stroke();
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-draw-mouse.html b/chapter14/ch14-canvas-draw-mouse.html
new file mode 100755
index 0000000..7a622cb
--- /dev/null
+++ b/chapter14/ch14-canvas-draw-mouse.html
@@ -0,0 +1,63 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <input type="color" id="bgColor" />
+    <br>
+    <img src="" width="300" height="200" id="holder" />
+    <input type="button" id="save" value="save" />
+    <script>
+      window.onload = init;
+
+      let canvas = document.getElementById("canvas");
+      let ctx = canvas.getContext("2d");
+      canvas.width = 700;
+      canvas.height = 700;
+      let pos = {
+        x: 0,
+        y: 0,
+      };
+
+      let bgColor = "red";
+      let bgC = document.getElementById("bgColor");
+      bgC.addEventListener("change", function () {
+        bgColor = event.target.value;
+      });
+
+      document.getElementById("save").addEventListener("click", function () {
+        let dataURL = canvas.toDataURL();
+        console.log(dataURL);
+        document.getElementById("holder").src = dataURL;
+      });
+
+      function init() {
+        canvas.addEventListener("mousemove", draw);
+        canvas.addEventListener("mousemove", setPosition);
+        canvas.addEventListener("mouseenter", setPosition);
+      }
+
+      function draw(e) {
+        if (e.buttons !== 1) return;
+        ctx.beginPath();
+        ctx.moveTo(pos.x, pos.y);
+        setPosition(e);
+        ctx.lineTo(pos.x, pos.y);
+        ctx.strokeStyle = bgColor;
+        ctx.lineWidth = 10;
+        ctx.lineCap = "round";
+        ctx.stroke();
+      }
+
+      function setPosition(e) {
+        pos.x = e.pageX;
+        pos.y = e.pageY;
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-drawing-canvas.html b/chapter14/ch14-canvas-drawing-canvas.html
new file mode 100755
index 0000000..81a1b5d
--- /dev/null
+++ b/chapter14/ch14-canvas-drawing-canvas.html
@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas1"></canvas>
+    <canvas id="canvas2"></canvas>
+    <canvas id="canvas3"></canvas>
+    <script>
+      let canvas1 = document.getElementById("canvas1");
+      let ctx1 = canvas1.getContext("2d");
+      ctx1.strokeRect(5, 5, 150, 100);
+
+      let canvas2 = document.getElementById("canvas2");
+      let ctx2 = canvas2.getContext("2d");
+      ctx2.beginPath();
+      ctx2.fillStyle = "blue";
+      ctx2.arc(60, 60, 20, 0, 2 * Math.PI);
+      ctx2.stroke();
+
+      let canvas3 = document.getElementById("canvas3");
+      let ctx3 = canvas3.getContext("2d");
+      ctx3.drawImage(canvas1, 10, 10);
+      ctx3.drawImage(canvas2, 10, 10);
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-lines.html b/chapter14/ch14-canvas-lines.html
new file mode 100755
index 0000000..cee95f5
--- /dev/null
+++ b/chapter14/ch14-canvas-lines.html
@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <style>
+      #canvas1 {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+
+  <body>
+    <canvas id="canvas1"></canvas>
+    <script>
+      var canvas = document.getElementById("canvas1");
+      var ctx = canvas.getContext("2d");
+      canvas.width = 100;
+      canvas.height = 100;
+      ctx.lineWidth = 2;
+      ctx.moveTo(0, 20);
+      ctx.lineTo(50, 100);
+      ctx.stroke();
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-save-image.html b/chapter14/ch14-canvas-save-image.html
new file mode 100755
index 0000000..27d7f2a
--- /dev/null
+++ b/chapter14/ch14-canvas-save-image.html
@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <input type="file" id="imgLoader" />
+    <br>
+    <canvas id="canvas"></canvas>
+    <script>
+      let canvas = document.getElementById("canvas");
+      let ctx = canvas.getContext("2d");
+      let imgLoader = document.getElementById("imgLoader");
+      imgLoader.addEventListener("change", upImage, false);
+      function upImage() {
+        let fr = new FileReader();
+        fr.readAsDataURL(event.target.files[0]);
+        fr.onload = function (e) {
+          let img = new Image();
+          img.src = event.target.result;
+          img.onload = function () {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+          };
+          console.log(fr);
+        };
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-saving-image.html b/chapter14/ch14-canvas-saving-image.html
new file mode 100755
index 0000000..1aad4c2
--- /dev/null
+++ b/chapter14/ch14-canvas-saving-image.html
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <input type="color" id="squareColor" />
+    <br>
+    <img src="" width="200" height="200" id="holder" />
+    <input type="button" id="save" value="save" />
+    <script>
+      let canvas = document.getElementById("canvas");
+      let ctx = canvas.getContext("2d");
+      canvas.width = 200;
+      canvas.height = 200;
+      
+      let bgC = document.getElementById("squareColor");
+      bgC.addEventListener("change", function () {
+        color = event.target.value;
+        draw(color);
+      });
+
+      document.getElementById("save").addEventListener("click", function () {
+        let dataURL = canvas.toDataURL();
+        document.getElementById("holder").src = dataURL;
+      });
+
+      function draw(color) {
+        ctx.fillStyle = color;
+        ctx.fillRect(70, 70, 100, 100);
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-canvas-text.html b/chapter14/ch14-canvas-text.html
new file mode 100755
index 0000000..75a9952
--- /dev/null
+++ b/chapter14/ch14-canvas-text.html
@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <style>
+      #canvas1 {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas1"></canvas>
+    <script>
+      let canvas = document.getElementById("canvas1");
+      let ctx = canvas.getContext("2d");
+      canvas.width = 200;
+      canvas.height = 200;
+      ctx.font = "24px Arial";
+      let txt = "Hi canvas!";
+      ctx.fillText(txt, 10, 35);
+    </script>
+  </body>
+</html>
diff --git a/chapter9/ch9.js b/chapter14/ch14-canvas-upload-image.html
old mode 100755
new mode 100644
similarity index 100%
rename from chapter9/ch9.js
rename to chapter14/ch14-canvas-upload-image.html
diff --git a/chapter14/ch14-canvas.html b/chapter14/ch14-canvas.html
new file mode 100755
index 0000000..68cca19
--- /dev/null
+++ b/chapter14/ch14-canvas.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="c1"></canvas>
+    <script>
+      let canvas = document.getElementById("c1");
+      let ctx = canvas.getContext("2d");
+      canvas.width = 500; //px
+      canvas.height = 500; //px
+      //ctx.fillStyle = "pink";
+      ctx.fillRect(20, 40, 100, 100);
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-drawing-image.html b/chapter14/ch14-drawing-image.html
new file mode 100755
index 0000000..0c49e2f
--- /dev/null
+++ b/chapter14/ch14-drawing-image.html
@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="c1"></canvas>
+    <img id="flower" src="flower.jpg" />
+    <script>
+      window.onload = function () {
+        let canvas = document.getElementById("c1");
+        canvas.height = 300;
+        canvas.width = 300;
+        let ctx = canvas.getContext("2d");
+        let myImage = document.getElementById("flower");
+        ctx.drawImage(myImage, 10, 10);
+      };
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-geo-getlocation.html b/chapter14/ch14-geo-getlocation.html
new file mode 100755
index 0000000..d1f221c
--- /dev/null
+++ b/chapter14/ch14-geo-getlocation.html
@@ -0,0 +1,15 @@
+<html>
+  <body>
+    <script>
+      window.onload = init;
+
+      function init() {
+        navigator.geolocation.getCurrentPosition(showGeoPosition);
+      }
+
+      function showGeoPosition(data) {
+        console.dir(data);
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-inspect-geo.html b/chapter14/ch14-inspect-geo.html
new file mode 100755
index 0000000..27e4c8d
--- /dev/null
+++ b/chapter14/ch14-inspect-geo.html
@@ -0,0 +1,11 @@
+<html>
+  <body>
+    <script>
+      window.onload = init;
+
+      function init() {
+        console.dir(navigator.geolocation);
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-localstorage.html b/chapter14/ch14-localstorage.html
new file mode 100755
index 0000000..e760139
--- /dev/null
+++ b/chapter14/ch14-localstorage.html
@@ -0,0 +1,14 @@
+<html>
+  <body>
+    <div id="stored"></div>
+    <script>
+      let message = "Hello storage!";
+     // localStorage.setItem("example", message);
+
+      if (localStorage.getItem("example")) {
+        document.getElementById("stored").innerHTML =
+          localStorage.getItem("example");
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-media.html b/chapter14/ch14-media.html
new file mode 100755
index 0000000..b1215d8
--- /dev/null
+++ b/chapter14/ch14-media.html
@@ -0,0 +1,18 @@
+<html>
+  <body>
+    <audio controls>
+      <source src="sound.ogg" type="audio/ogg" />
+      <source src="sound.mp3" type="audio/mpeg" />
+    </audio>
+    <video width="1024" height="576" controls>
+      <source src="movie.mp4" type="video/mp4" />
+      <source src="movie.ogg" type="video/ogg" />
+    </video>
+    <iframe
+      width="1024"
+      height="576"
+      src="https://www.youtube.com/embed/v6VTv7czb1Y"
+    >
+    </iframe>
+  </body>
+</html>
diff --git a/chapter14/ch14-reading-file.html b/chapter14/ch14-reading-file.html
new file mode 100755
index 0000000..55aca2f
--- /dev/null
+++ b/chapter14/ch14-reading-file.html
@@ -0,0 +1,17 @@
+<html>
+  <body>
+    <input type="file" onchange="uploadFile(this.files)" />
+    <div id="message"></div>
+    <script>
+      let message = document.getElementById("message");
+
+      function uploadFile(files) {
+        let fr = new FileReader();
+        fr.onload = function (e) {
+          message.innerHTML = e.target.result;
+        };
+        fr.readAsText(files[0]);
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-upload-file.html b/chapter14/ch14-upload-file.html
new file mode 100755
index 0000000..92ed0e3
--- /dev/null
+++ b/chapter14/ch14-upload-file.html
@@ -0,0 +1,14 @@
+<html>
+  <body>
+    <input type="file" onchange="uploadFile(this.files)" />
+    <div id="message"></div>
+    <script>
+      let message = document.getElementById("message");
+
+      function uploadFile(files) {
+        console.log(files[0]);
+        message.innerText = files[0].name;
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14-upload-files.html b/chapter14/ch14-upload-files.html
new file mode 100755
index 0000000..783477e
--- /dev/null
+++ b/chapter14/ch14-upload-files.html
@@ -0,0 +1,15 @@
+<html>
+  <body>
+    <input type="file" multiple onchange="uploadFile(this.files)" />
+    <div id="message"></div>
+    <script>
+      let message = document.getElementById("message");
+
+      function uploadFile(files) {
+        for (let i = 0; i < files.length; i++) {
+          message.innerHTML += files[i].name + "<br>";
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter14/ch14.js b/chapter14/ch14.js
new file mode 100755
index 0000000..7fa387a
--- /dev/null
+++ b/chapter14/ch14.js
@@ -0,0 +1,6 @@
+let varContainingFunction = function () {
+  let varInFunction = "I'm in a function.";
+  console.log("hi there!");
+};
+
+varContainingFunction();
diff --git a/chapter14/countdown timer b/chapter14/countdown timer
new file mode 100644
index 0000000..25556ed
--- /dev/null
+++ b/chapter14/countdown timer	
@@ -0,0 +1,101 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>JavaScript</title>
+    <style>
+        .clock {
+            background-color: blue;
+            width: 400px;
+            text-align: center;
+            color: white;
+            font-size: 1em;
+        }
+        
+        .clock > span {
+            padding: 10px;
+            border-radius: 10px;
+            background-color: black;
+        }
+        
+        .clock > span > span {
+            padding: 5px;
+            border-radius: 10px;
+            background-color: red;
+        }
+        
+        input {
+            padding: 15px;
+            margin: 20px;
+            font-size: 1.5em;
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <input type="date" name="endDate">
+        <div class="clock"> <span><span class="days">0</span> Days</span> <span><span class="hours">0</span> Hours</span> <span><span class="minutes">0</span> Minutes</span> <span><span class="seconds">0</span> Seconds</span>
+        </div>
+    </div>
+    <script>
+        const endDate = document.querySelector("input[name='endDate']");
+        const clock = document.querySelector(".clock");
+        let timeInterval;
+        let timeStop = true;
+        const savedValue = localStorage.getItem("countdown") || false;
+        if (savedValue) {
+            startClock(savedValue);
+            let inputValue = new Date(savedValue);
+            endDate.valueAsDate = inputValue;
+        }
+        endDate.addEventListener("change", function (e) {
+            e.preventDefault();
+            clearInterval(timeInterval);
+            const temp = new Date(endDate.value);
+            localStorage.setItem("countdown", temp);
+            startClock(temp);
+            timeStop = true;
+        })
+
+        function startClock(d) {
+            function updateCounter() {
+                let tl = (timeLeft(d));
+                if (tl.total <= 0) {
+                    timeStop = false;
+                }
+                for (let pro in tl) {
+                    let el = clock.querySelector("." + pro);
+                    if (el) {
+                        el.innerHTML = tl[pro];
+                    }
+                }
+            }
+            updateCounter();
+            if (timeStop) {
+                timeInterval = setInterval(updateCounter, 1000);
+            }
+            else {
+                clearInterval(timeInterval);
+            }
+        }
+
+        function timeLeft(d) {
+            let currentDate = new Date();
+            let t = Date.parse(d) - Date.parse(currentDate);
+            let seconds = Math.floor((t / 1000) % 60);
+            let minutes = Math.floor((t / 1000 / 60) % 60);
+            let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
+            let days = Math.floor(t / (1000 * 60 * 60 * 24));
+            return {
+                "total": t
+                , "days": days
+                , "hours": hours
+                , "minutes": minutes
+                , "seconds": seconds
+            };
+        }
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/draw on canvas b/chapter14/draw on canvas
new file mode 100644
index 0000000..8bcf0c1
--- /dev/null
+++ b/chapter14/draw on canvas	
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="canvas" width="600" height="400"></canvas>
+    <div>
+        <button class="save">Save</button>
+        <button class="clear">clear</button>
+        <span>Color: <input type="color" value="#ffff00" id="penColor"></span>
+        <span>Width: <input type="range" min="1" max="20" value="10" id="penWidth"></span>
+    </div>
+    <div class="output"></div>
+    <script>
+        const canvas = document.querySelector('#canvas');
+        const ctx = canvas.getContext('2d');
+        const penColor = document.querySelector('#penColor');
+        const penWidth = document.querySelector('#penWidth');
+        const btnSave = document.querySelector('.save');
+        const btnClear = document.querySelector('.clear');
+        const output = document.querySelector('.output');
+        const mLoc = {
+            draw: false, x: 0, y: 0, lastX: 0, lastY: 0
+        };
+        canvas.style.border = '1px solid black';
+        btnSave.addEventListener('click', saveImg);
+        btnClear.addEventListener('click', clearCanvas);
+
+        canvas.addEventListener('mousemove', (e) => {
+            mLoc.lastX = mLoc.x;
+            mLoc.lastY = mLoc.y;
+            //console.log(e);
+            mLoc.x = e.clientX;
+            mLoc.y = e.clientY;
+            draw();
+        })
+
+        canvas.addEventListener('mousedown', (e) => {
+            mLoc.draw = true;
+        })
+        canvas.addEventListener('mouseup', (e) => {
+            mLoc.draw = false;
+        })
+        canvas.addEventListener('mouseout', (e) => {
+            mLoc.draw = false;
+        })
+
+        function saveImg() {
+            const dataURL = canvas.toDataURL();
+            console.log(dataURL);
+            const img = document.createElement('img');
+            output.prepend(img);
+            img.setAttribute('src', dataURL);
+            const link = document.createElement('a');
+            output.append(link);
+            let fileName = Math.random().toString(16).substr(-8) + '.png'
+            link.setAttribute('download', fileName);
+            link.href = dataURL;
+            link.click();
+            output.removeChild(link);
+        }
+        function clearCanvas() {
+            let temp = confirm('clear canvas?');
+            if (temp) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+        }
+
+        function draw() {
+            if (mLoc.draw) {
+                ctx.beginPath();
+                ctx.moveTo(mLoc.lastX, mLoc.lastY);
+                ctx.lineTo(mLoc.x, mLoc.y);
+                ctx.strokeStyle = penColor.value;
+                ctx.lineWidth = penWidth.value;
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/ex1 Image Thumbnails b/chapter14/ex1 Image Thumbnails
new file mode 100644
index 0000000..4808498
--- /dev/null
+++ b/chapter14/ex1 Image Thumbnails	
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+
+<head>
+        <title>Complete JavaScript Course</title>
+    <style>
+        .thumb {
+            max-height: 100px;
+        }
+    </style>
+</head>
+
+<body>
+    <input type="file" multiple accept="image/*" />
+    <div class="output"></div>
+    <script>
+        const message = document.getElementById("message");
+        const output = document.querySelector(".output");
+        const myInput = document.querySelector("input");
+        myInput.addEventListener("change", uploadAndReadFile);
+        function uploadAndReadFile(e) {
+            const files = e.target.files;
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const img = document.createElement("img");
+                img.classList.add("thumb");
+                img.file = file;
+                output.appendChild(img);
+                const reader = new FileReader();
+                reader.onload = (function (myImg) { return function (ele) { myImg.src = ele.target.result; }; })(img);
+                reader.readAsDataURL(file);
+            }
+        }
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/ex1 Image preview b/chapter14/ex1 Image preview
new file mode 100644
index 0000000..4808498
--- /dev/null
+++ b/chapter14/ex1 Image preview	
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+
+<head>
+        <title>Complete JavaScript Course</title>
+    <style>
+        .thumb {
+            max-height: 100px;
+        }
+    </style>
+</head>
+
+<body>
+    <input type="file" multiple accept="image/*" />
+    <div class="output"></div>
+    <script>
+        const message = document.getElementById("message");
+        const output = document.querySelector(".output");
+        const myInput = document.querySelector("input");
+        myInput.addEventListener("change", uploadAndReadFile);
+        function uploadAndReadFile(e) {
+            const files = e.target.files;
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const img = document.createElement("img");
+                img.classList.add("thumb");
+                img.file = file;
+                output.appendChild(img);
+                const reader = new FileReader();
+                reader.onload = (function (myImg) { return function (ele) { myImg.src = ele.target.result; }; })(img);
+                reader.readAsDataURL(file);
+            }
+        }
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/flower.jpg b/chapter14/flower.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a70e2b48a4d787d28af584db9cfb4ec033cd8a98
GIT binary patch
literal 4892
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

literal 0
HcmV?d00001

diff --git a/chapter14/matrix effect b/chapter14/matrix effect
new file mode 100644
index 0000000..786e146
--- /dev/null
+++ b/chapter14/matrix effect	
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+
+</head>
+
+<body>
+
+
+    <div class="output"></div>
+    <script>
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.setAttribute('width', '600');
+        canvas.setAttribute('height', '400');
+        document.body.prepend(canvas);
+        const textPos = Array(60).join(0).split('');
+        console.log(textPos);
+
+        function matrix() {
+            let output = '0';
+            ctx.fillStyle = 'rgba(0,0,0,.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = 'green';
+            textPos.map((posY, index) => {
+                output = String.fromCharCode(62 + Math.random() * 26);
+                console.log(output);
+                let posX = (index * 10) + 10;
+                ctx.fillText(output, posX, posY);
+                if (posY > 100 + Math.random() * 1000) {
+                    textPos[index] = 0;
+                }
+                else {
+                    textPos[index] = posY + 10;
+                }
+            })
+        }
+        setInterval(matrix, 50);
+    </script>
+</body>
+
+</html>
diff --git a/chapter14/task List b/chapter14/task List
new file mode 100644
index 0000000..91d44dc
--- /dev/null
+++ b/chapter14/task List	
@@ -0,0 +1,79 @@
+<!doctype html>
+<html>
+<head>
+    <title>JavaScript</title>
+    <style>
+        .ready {
+    background-color: #ddd;
+    color: red;
+    text-decoration: line-through ;
+}
+    </style>
+</head>
+<body>
+    <div class="main">
+        <input placeholder="New Item" value="test item" maxlength="30">
+        <button>Add</button>
+    </div>
+    <ul class="output">
+    </ul>
+    <script>
+        const userTask = document.querySelector('.main input');
+        const addBtn = document.querySelector('.main button');
+        const output = document.querySelector('.output');
+        const tasks = JSON.parse(localStorage.getItem('tasklist')) || [];
+        addBtn.addEventListener('click', createListItem);
+        if (tasks.length > 0) {
+            tasks.forEach((task) => {
+                genItem(task.val, task.checked);
+            })
+        }
+        function saveTasks() {
+            localStorage.setItem('tasklist', JSON.stringify(tasks));
+          
+        }
+        function buildTasks() {
+            tasks.length = 0;
+            const curList = output.querySelectorAll('li');
+            curList.forEach((el) => {
+                const tempTask = {
+                    val: el.textContent,
+                    checked: false
+                };
+                if (el.classList.contains('ready')) {
+                    tempTask.checked = true;
+                }
+                tasks.push(tempTask);
+            })
+            saveTasks();
+        }
+        function genItem(val, complete) {
+            const li = document.createElement('li');
+            const temp = document.createTextNode(val);
+            li.appendChild(temp);
+            output.append(li);
+            userTask.value = '';
+            if (complete) {
+                li.classList.add('ready');
+            }
+            li.addEventListener('click', (e) => {
+                li.classList.toggle('ready');
+                buildTasks();
+            })
+            return val;
+        }
+        function createListItem() {
+            const val = userTask.value;
+            if (val.length > 0) {
+                const myObj = {
+                    val: genItem(val, false),
+                    checked: false
+                };
+                tasks.push(myObj);
+                saveTasks();
+                buildTasks();
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/chapter15/ch15-ajax.html b/chapter15/ch15-ajax.html
new file mode 100755
index 0000000..ef90287
--- /dev/null
+++ b/chapter15/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>
diff --git a/chapter15/ch15-example-json.json b/chapter15/ch15-example-json.json
new file mode 100755
index 0000000..c7928fc
--- /dev/null
+++ b/chapter15/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"
+  }
+}
diff --git a/chapter15/ch15-express.js b/chapter15/ch15-express.js
new file mode 100755
index 0000000..e13267f
--- /dev/null
+++ b/chapter15/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');
+});
\ No newline at end of file
diff --git a/chapter15/ch15-jquery.html b/chapter15/ch15-jquery.html
new file mode 100755
index 0000000..da80efc
--- /dev/null
+++ b/chapter15/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>
diff --git a/chapter15/ch15-node.js b/chapter15/ch15-node.js
new file mode 100755
index 0000000..1f09738
--- /dev/null
+++ b/chapter15/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...');
+
diff --git a/chapter15/ch15-vue-component.html b/chapter15/ch15-vue-component.html
new file mode 100755
index 0000000..b126e3b
--- /dev/null
+++ b/chapter15/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>
diff --git a/chapter15/ch15-vue.html b/chapter15/ch15-vue.html
new file mode 100755
index 0000000..e2ce949
--- /dev/null
+++ b/chapter15/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>
\ No newline at end of file
diff --git a/chapter15/exampled3.html b/chapter15/exampled3.html
new file mode 100644
index 0000000..4ca9b65
--- /dev/null
+++ b/chapter15/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>
\ No newline at end of file
diff --git a/chapter15/examplereact.html b/chapter15/examplereact.html
new file mode 100644
index 0000000..0c98e73
--- /dev/null
+++ b/chapter15/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>
\ No newline at end of file
diff --git a/chapter15/exampleunderscore.html b/chapter15/exampleunderscore.html
new file mode 100644
index 0000000..d5c5e65
--- /dev/null
+++ b/chapter15/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>
\ No newline at end of file
diff --git a/chapter9/ch9-accessing.html b/chapter9/ch9-accessing.html
index 0310f1e..63d2975 100755
--- a/chapter9/ch9-accessing.html
+++ b/chapter9/ch9-accessing.html
@@ -5,4 +5,7 @@
     <div id="two" class="example">Hi!</div>
     <div id="three" class="something">Hi!</div>
   </body>
+  <script>
+    console.log(document.getElementById("two"));
+  </script>
 </html>
diff --git a/chapter9/ch9-domflow.html b/chapter9/ch9-domflow.html
index 152eaba..065706e 100755
--- a/chapter9/ch9-domflow.html
+++ b/chapter9/ch9-domflow.html
@@ -26,7 +26,7 @@
       }
       let divs = document.getElementsByTagName("div");
       for (let i = 0; i < divs.length; i++) {
-        divs[i].addEventListener("click", bup, true);
+        divs[i].addEventListener("click", bup);
       }
     </script>
   </body>