From b89b9dfb3fa69a33ac03e49ea157899ca17eff47 Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Sat, 4 Sep 2021 21:22:51 +0200
Subject: [PATCH 1/9] maaike's code samples

---
 .DS_Store                                     | Bin 0 -> 6148 bytes
 Chapter 11/ch11-evileval.html                 |  10 +
 Chapter 11/ch11.js                            | 310 ++++++++++++++++++
 Chapter 12/ch12-cookie.html                   |  33 ++
 Chapter 12/ch12.js                            | 129 ++++++++
 .../ch13-browser-supporting-file-reader.html  |  13 +
 Chapter 13/ch13-canvas-animation.html         |  42 +++
 Chapter 13/ch13-canvas-circle.html            |  21 ++
 Chapter 13/ch13-canvas-draw-mouse.html        |  63 ++++
 Chapter 13/ch13-canvas-drawing-canvas.html    |  31 ++
 Chapter 13/ch13-canvas-lines.html             |  23 ++
 Chapter 13/ch13-canvas-save-image.html        |  34 ++
 Chapter 13/ch13-canvas-saving-image.html      |  38 +++
 Chapter 13/ch13-canvas-text.html              |  21 ++
 Chapter 13/ch13-canvas.html                   |  20 ++
 Chapter 13/ch13-drawing-image.html            |  23 ++
 Chapter 13/ch13-geo-getlocation.html          |  15 +
 Chapter 13/ch13-inspect-geo.html              |  11 +
 Chapter 13/ch13-localstorage.html             |  14 +
 Chapter 13/ch13-media.html                    |  18 +
 Chapter 13/ch13-reading-file.html             |  17 +
 Chapter 13/ch13-upload-file.html              |  14 +
 Chapter 13/ch13-upload-files.html             |  15 +
 Chapter 13/ch13.js                            |   6 +
 Chapter 14/ch14-ajax.html                     |  22 ++
 Chapter 14/ch14-example-json.json             |  13 +
 Chapter 14/ch14-express.js                    |  10 +
 Chapter 14/ch14-jquery.html                   |  22 ++
 Chapter 14/ch14-node.js                       |  11 +
 Chapter 14/ch14-vue-component.html            |  18 +
 Chapter 14/ch14-vue.html                      |  23 ++
 Chapter3/ch3.js                               | 181 ++++++++++
 chapter 1/ch1.js                              |  13 +
 chapter 1/ch1_alert.js                        |   2 +
 chapter 1/ch1_popup1.html                     |   5 +
 chapter 1/ch1_popup2.html                     |   3 +
 chapter 6/ch6.js                              | 220 +++++++++++++
 chapter10/ch10-animate.html                   |  30 ++
 chapter10/ch10-dragdrop.html                  |  46 +++
 chapter10/ch10-eventtarget.html               |  10 +
 chapter10/ch10-formcontent.html               |  21 ++
 chapter10/ch10-formsubmit.html                |   8 +
 chapter10/ch10-formsubmitreturn.html          |  33 ++
 chapter10/ch10-keyevent.html                  |  23 ++
 chapter10/ch10-keyeventreturn.html            |  23 ++
 chapter10/ch10-mouseevents.html               |  11 +
 chapter10/ch10-mouseevents2.html              |  20 ++
 chapter10/ch10-onchang-onblur.html            |  29 ++
 chapter10/ch10-specifyingevents.html          |  13 +
 chapter2/ch2.js                               | 184 +++++++++++
 chapter4/ch4.js                               | 171 ++++++++++
 chapter5/ch5.js                               | 232 +++++++++++++
 chapter7/ch7-helloweb.html                    |   9 +
 chapter7/ch7.html                             |  21 ++
 chapter7/ch7classes.js                        | 118 +++++++
 chapter9/ch9-accessing.html                   |   8 +
 chapter9/ch9-attributes.html                  |  26 ++
 chapter9/ch9-classes.html                     |  27 ++
 chapter9/ch9-classes2.html                    |  23 ++
 chapter9/ch9-classes3.html                    |  23 ++
 chapter9/ch9-click.html                       |  23 ++
 chapter9/ch9-colors.html                      |  27 ++
 chapter9/ch9-domflow.html                     |  33 ++
 chapter9/ch9-event-listener.html              |  16 +
 chapter9/ch9-new-element.html                 |  12 +
 chapter9/ch9-selectionelements.html           |   8 +
 chapter9/ch9-this.html                        |  10 +
 chapter9/ch9-toggle-visibility.html           |  16 +
 chapter9/ch9-treasure.html                    |  19 ++
 chapter9/ch9.js                               |   0
 70 files changed, 2737 insertions(+)
 create mode 100644 .DS_Store
 create mode 100755 Chapter 11/ch11-evileval.html
 create mode 100755 Chapter 11/ch11.js
 create mode 100755 Chapter 12/ch12-cookie.html
 create mode 100755 Chapter 12/ch12.js
 create mode 100755 Chapter 13/ch13-browser-supporting-file-reader.html
 create mode 100755 Chapter 13/ch13-canvas-animation.html
 create mode 100755 Chapter 13/ch13-canvas-circle.html
 create mode 100755 Chapter 13/ch13-canvas-draw-mouse.html
 create mode 100755 Chapter 13/ch13-canvas-drawing-canvas.html
 create mode 100755 Chapter 13/ch13-canvas-lines.html
 create mode 100755 Chapter 13/ch13-canvas-save-image.html
 create mode 100755 Chapter 13/ch13-canvas-saving-image.html
 create mode 100755 Chapter 13/ch13-canvas-text.html
 create mode 100755 Chapter 13/ch13-canvas.html
 create mode 100755 Chapter 13/ch13-drawing-image.html
 create mode 100755 Chapter 13/ch13-geo-getlocation.html
 create mode 100755 Chapter 13/ch13-inspect-geo.html
 create mode 100755 Chapter 13/ch13-localstorage.html
 create mode 100755 Chapter 13/ch13-media.html
 create mode 100755 Chapter 13/ch13-reading-file.html
 create mode 100755 Chapter 13/ch13-upload-file.html
 create mode 100755 Chapter 13/ch13-upload-files.html
 create mode 100755 Chapter 13/ch13.js
 create mode 100755 Chapter 14/ch14-ajax.html
 create mode 100755 Chapter 14/ch14-example-json.json
 create mode 100755 Chapter 14/ch14-express.js
 create mode 100755 Chapter 14/ch14-jquery.html
 create mode 100755 Chapter 14/ch14-node.js
 create mode 100755 Chapter 14/ch14-vue-component.html
 create mode 100755 Chapter 14/ch14-vue.html
 create mode 100755 Chapter3/ch3.js
 create mode 100755 chapter 1/ch1.js
 create mode 100755 chapter 1/ch1_alert.js
 create mode 100755 chapter 1/ch1_popup1.html
 create mode 100755 chapter 1/ch1_popup2.html
 create mode 100755 chapter 6/ch6.js
 create mode 100755 chapter10/ch10-animate.html
 create mode 100755 chapter10/ch10-dragdrop.html
 create mode 100755 chapter10/ch10-eventtarget.html
 create mode 100755 chapter10/ch10-formcontent.html
 create mode 100755 chapter10/ch10-formsubmit.html
 create mode 100755 chapter10/ch10-formsubmitreturn.html
 create mode 100755 chapter10/ch10-keyevent.html
 create mode 100755 chapter10/ch10-keyeventreturn.html
 create mode 100755 chapter10/ch10-mouseevents.html
 create mode 100755 chapter10/ch10-mouseevents2.html
 create mode 100755 chapter10/ch10-onchang-onblur.html
 create mode 100755 chapter10/ch10-specifyingevents.html
 create mode 100755 chapter2/ch2.js
 create mode 100755 chapter4/ch4.js
 create mode 100755 chapter5/ch5.js
 create mode 100755 chapter7/ch7-helloweb.html
 create mode 100755 chapter7/ch7.html
 create mode 100755 chapter7/ch7classes.js
 create mode 100755 chapter9/ch9-accessing.html
 create mode 100755 chapter9/ch9-attributes.html
 create mode 100755 chapter9/ch9-classes.html
 create mode 100755 chapter9/ch9-classes2.html
 create mode 100755 chapter9/ch9-classes3.html
 create mode 100755 chapter9/ch9-click.html
 create mode 100755 chapter9/ch9-colors.html
 create mode 100755 chapter9/ch9-domflow.html
 create mode 100755 chapter9/ch9-event-listener.html
 create mode 100755 chapter9/ch9-new-element.html
 create mode 100755 chapter9/ch9-selectionelements.html
 create mode 100755 chapter9/ch9-this.html
 create mode 100755 chapter9/ch9-toggle-visibility.html
 create mode 100755 chapter9/ch9-treasure.html
 create mode 100755 chapter9/ch9.js

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..f80bcd61c37b6d531944fb3df5dfdc2edf3506df
GIT binary patch
literal 6148
zcmeHKL2uJA6n@@1a5GKxFbTxT7jBi-RNK@GQr3mTZb(6J0JJ4bwMI(g(58!^6y-nc
zxcwF`9QgtK8^n9Ihqh*wdYaJilb*j9zxQnUvux)90P9a<7oY_I9F?%)U~`9%pR^`x
zriYwNjZwe=#vs6r%38GTunbrR{xt^Z>^9*Ph7dvyH_q=Qk5U<-_h*!+$)xCXezCRn
z#>S(^oIBjvay|w_Sq4Q|Oeg(t{GPsEhs7{5_8TeFzjheCO$Oz0Yx_`UMVMrRu}V(j
z0fu~dmt?Ul`*NDa6E#kt9h^6L^SJeVHgorTown$9_vdXfb31#zw&-<t=kq3i`oevA
zbTaz<W%hOc?NYPL@G?^J#Nahtp>fAz&x3K6%Iplil<C0XA|0@sp1HxP9Oc(TEsGmT
z-#5hZiyi;_?@vDtmdC~`$L7P@{Cr{Cx>5O1H?6kRg)O_WE7n|@0dq|F=E@m1&@x~d
z_+J>H`$3=*dIl?v>gvEol>mqh>{fy{)e@8=40;ADjp#vPIu%i;GE-tOosRv&#CZlQ
zjXE8eDL$B)nVAZOso8OSp~8WA8f|MCungR0U|oN<=>31Sy#BwPWWOu}mVpPw0BiVx
z-^V4Hx3#u7dTRyh2`UN2RT@<aHs(2220g{kP?exhkb&qKtTbW|iv1B#G}y*6aIXyf
E0l~GpDF6Tf

literal 0
HcmV?d00001

diff --git a/Chapter 11/ch11-evileval.html b/Chapter 11/ch11-evileval.html
new file mode 100755
index 0000000..ea68f9c
--- /dev/null
+++ b/Chapter 11/ch11-evileval.html	
@@ -0,0 +1,10 @@
+<html>
+  <body>
+    <input onchange="go(this)"></input>
+    <script>
+      function go(e) {
+        eval(e.value);
+      }
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Chapter 11/ch11.js b/Chapter 11/ch11.js
new file mode 100755
index 0000000..9cdb6e5
--- /dev/null
+++ b/Chapter 11/ch11.js	
@@ -0,0 +1,310 @@
+let x = 7;
+console.log(Number.isNaN(x));
+console.log(isNaN(x));
+
+let uri = "https://www.example.com/submit?name=maaike van putten";
+let encoded_uri = encodeURI(uri);
+console.log("Encoded:", encoded_uri);
+let decoded_uri = decodeURI(encoded_uri);
+console.log("Decoded:", decoded_uri);
+
+let uri = "https://www.example.com/submit?name=maaike van putten";
+let encoded_uri = encodeURIComponent(uri);
+console.log("Encoded:", encoded_uri);
+let decoded_uri = decodeURIComponent(encoded_uri);
+console.log("Decoded:", decoded_uri);
+
+//parseint
+let str_int = "6";
+let int_int = parseInt(str_int);
+console.log("Type of", int_int, "is", typeof int_int);
+
+let str_float = "7.6";
+let int_float = parseInt(str_float);
+console.log("Type of", int_float, "is", typeof int_float);
+
+let str_binary = "0b101";
+let int_binary = parseInt(str_binary);
+console.log("Type of", int_binary, "is", typeof int_binary);
+
+let str_nan = "hello!";
+let int_nan = parseInt(str_nan);
+console.log("Type of", int_nan, "is", typeof int_nan);
+
+//parsefloat
+let str_float = "7.6";
+let float_float = parseFloat(str_float);
+console.log("Type of", float_float, "is", typeof float_float);
+
+let str_version_nr = "2.3.4";
+let float_version_nr = parseFloat(str_version_nr);
+console.log("Type of", float_version_nr, "is", typeof float_version_nr);
+
+let str_int = "6";
+let float_int = parseFloat(str_int);
+console.log("Type of", float_int, "is", typeof float_int);
+
+let str_binary = "0b101";
+let float_binary = parseFloat(str_binary);
+console.log("Type of", float_binary, "is", typeof float_binary);
+
+let str_nan = "hello!";
+let float_nan = parseFloat(str_nan);
+console.log("Type of", float_nan, "is", typeof float_nan);
+
+// concat() and split()
+let s1 = "Hello ";
+let s2 = "JavaScript";
+let result = s1.concat(s2);
+console.log(result);
+
+let arr_result = result.split(" ");
+console.log(arr_result);
+
+let favoriteFruits = "strawberry,watermelon,grapefruit";
+let arr_fruits = favoriteFruits.split(",");
+console.log(arr_fruits);
+
+// indexOf() and lastIndexOf() and charAt()
+let poem = "Roses are red, violets are blue, if I can do JS, then you can too!";
+let index_re = poem.indexOf("re");
+console.log(index_re);
+
+let indexNotFound = poem.indexOf("python");
+console.log(indexNotFound);
+
+let lastIndex_re = poem.lastIndexOf("re");
+console.log(lastIndex_re);
+
+let pos1 = poem.charAt(10);
+console.log(pos1);
+
+let pos2 = poem.charAt(1000);
+console.log(pos2);
+
+//slice
+let str = "Baby shark";
+let substr1 = str.slice(5);
+let substr2 = str.slice(0,3);
+console.log("1:", substr1);
+console.log("2:", substr2);
+
+// replace() 
+let hi = "Hi buddy";
+let new_hi = hi.replace("buddy", "Pascal");
+console.log(new_hi);
+
+let new_hi2 = hi.replace("not there", "never there");
+console.log(new_hi2);
+
+//replace only all, first first we'll need regex
+let s3 = "hello hello";
+let new_s3 = s3.replace("hello", "oh");
+console.log(new_s3);
+
+// toLowerCase() and toUpperCase()
+let low_bye = "bye!";
+let up_bye = low_bye.toUpperCase();
+console.log(up_bye);
+
+let caps = "HI HOW ARE YOU?";
+let fixed_caps = caps.toLowerCase();
+console.log(fixed_caps);
+
+// startsWith() and endsWith()
+let encouragement = "You are doing great, keep up the good work!";
+let bool_start = encouragement.startsWith("You");
+console.log(bool_start);
+let bool_start2 = encouragement.startsWith("you");
+console.log(bool_start2);
+
+let bool_start3 = encouragement.toLowerCase().startsWith("you");
+console.log(bool_start3);
+
+let bool_end = encouragement.endsWith("Something else");
+console.log(bool_end);
+
+// search()
+let searchStr = "When I see my fellow, I say hello";
+let pos = searchStr.search("lo");
+console.log(pos);
+
+let notFound = searchStr.search("JavaScript");
+console.log(notFound);
+
+//Math
+
+// Max() and min()
+let highest = Math.max(2, 56, 12, 1, 233, 4);
+console.log(highest);
+
+let lowest = Math.min(2, 56, 12, 1, 233, 4);
+console.log(lowest);
+
+//NaN
+let highestOfWords = Math.max("hi", "bye");
+console.log(highestOfWords);
+
+// sqrt() and pow()
+let result = Math.sqrt(64);
+console.log(result);
+
+let result2 = Math.pow(5, 3);
+console.log(result2);
+
+// Ceil() and floor() and trunc() and round()
+let x = 6.78;
+let y = 5.34;
+
+console.log("X:", x, "becomes", Math.round(x));
+console.log("Y:", y, "becomes", Math.round(y));
+
+console.log("X:", x, "becomes", Math.ceil(x));
+console.log("Y:", y, "becomes", Math.ceil(y));
+
+let negativeX = -x;
+let negativeY = -y;
+
+console.log("negativeX:", negativeX, "becomes", Math.ceil(negativeX));
+console.log("negativeY:", negativeY, "becomes", Math.ceil(negativeY));
+
+console.log("X:", x, "becomes", Math.floor(x));
+console.log("Y:", y, "becomes", Math.floor(y));
+
+console.log("negativeX:", negativeX, "becomes", Math.floor(negativeX));
+console.log("negativeY:", negativeY, "becomes", Math.floor(negativeY));
+
+console.log("X:", x, "becomes", Math.trunc(x));
+console.log("Y:", y, "becomes", Math.trunc(y));
+
+// Exp() and log10()
+let x = 2;
+let exp = Math.exp(2);
+console.log("Exp:", exp);
+let log = Math.log(exp);
+console.log("Log:", log);
+
+// Date
+// Create date: constructor and now
+let now = new Date();
+let now2 = Date.now();
+let milliDate = new Date(1000);
+let stringDate = new Date("Sat Jun 05 2021 12:40:12 GMT+0200");
+let specificDate = new Date(2022, 1, 10, 12, 10, 15, 100);
+
+console.log(now);
+console.log(now2);
+console.log(milliDate);
+console.log(stringDate);
+console.log(specificDate);
+
+// Methods to get and set the elements of a date
+let d = new Date();
+console.log("Day:", d.getDay());
+console.log("Month:", d.getMonth());
+console.log("Year:", d.getFullYear());
+console.log("Seconds:", d.getSeconds());
+console.log("Milliseconds:", d.getMilliseconds());
+console.log("Time:", d.getTime());
+
+d.setFullYear(2010);
+console.log(d);
+
+d.setMonth(9);
+console.log(d);
+
+d.setDate(10);
+console.log(d);
+
+d.setHours(10);
+console.log(d);
+
+d.setMinutes(10);
+console.log(d);
+
+d.setSeconds(10);
+console.log(d);
+
+d.setMilliseconds(10);
+console.log(d);
+
+d.setTime(1622889770682);
+console.log(d);
+
+// Parse() date
+let d1 = Date.parse("June 5, 2021");
+console.log(d1);
+
+let d2 = Date.parse("6/5/2021");
+console.log(d2);
+
+// Convert date to string
+console.log(d.toDateString());
+console.log(d.toLocaleDateString);
+
+// Array
+let arr = ["grapefruit", 4, "hello", 5.6, true];
+
+// foreach() method
+function printStuff(element, index) {
+  console.log("Printing stuff:", element, "on array position:", index);
+}
+
+arr.forEach(printStuff);
+
+// filter() method
+function checkString(element, index) {
+  return typeof element === "string";
+}
+
+let filterArr = arr.filter(checkString);
+console.log(filterArr);
+
+// every() method
+console.log(arr.every(checkString)); //false not all string
+
+// copyWithin() method
+// copy to pos 0 the element at pos 3 to the end
+let arr = ["grapefruit", 4, "hello", 5.6, true];
+arr.copyWithin(0, 3);
+
+arr = ["grapefruit", 4, "hello", 5.6, true];
+
+// copy to pos 0 the element at pos 3
+arr.copyWithin(0, 3, 4);
+
+// lastIndexOf() method
+let bb = ["so", "bye", "bye", "love"];
+console.log(bb.lastIndexOf("bye"));
+
+// join() method
+let letters = ["a", "b", "c"];
+let x = letters.join();
+console.log(x);
+
+// Number
+// isNaN()
+let x = 34;
+console.log(isNaN(x));
+let str = "hi";
+console.log(isNaN(str));
+
+// isFinite()
+console.log(isFinite(x));
+console.log(isFinite(str));
+console.log(isFinite(Infinity));
+console.log(isFinite(10 / 0));
+
+// isInteger()
+console.log(Number.isInteger(x));
+console.log(Number.isInteger(str));
+console.log(Number.isInteger(Infinity));
+console.log(Number.isInteger(2.4));
+
+// toFixed()
+let x = 1.23456;
+let newX = x.toFixed(2); // 2 decimals
+
+// toPrecision()
+let x = 1.23456;
+let newX = x.toPrecision(2); //2 numbers
diff --git a/Chapter 12/ch12-cookie.html b/Chapter 12/ch12-cookie.html
new file mode 100755
index 0000000..b8ab7ac
--- /dev/null
+++ b/Chapter 12/ch12-cookie.html	
@@ -0,0 +1,33 @@
+<html>
+  <body>
+    <input onchange="setCookie(this)" />
+    <button onclick="sayHi('name')">Let's talk, cookie!</button>
+    <p id="hi"></p>
+
+    <script>
+      function setCookie(e) {
+        document.cookie = "name=" + e.value + ";";
+      }
+
+      function sayHi(key) {
+        let name = getCookie(key);
+        document.getElementById("hi").innerHTML = "Hi " + name;
+      }
+
+      function getCookie(key) {
+        let cookie = decodeURIComponent(document.cookie);
+        let cookieList = cookie.split(";");
+        for (let i = 0; i < cookieList.length; i++) {
+          let c = cookieList[i];
+          if (c.charAt(0) == " ") {
+            c = c.trim();
+          }
+          if (c.startsWith(key)) {
+            console.log("hi" + c);
+            return c.substring(key.length + 1, c.length);
+          }
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/Chapter 12/ch12.js b/Chapter 12/ch12.js
new file mode 100755
index 0000000..3da5d09
--- /dev/null
+++ b/Chapter 12/ch12.js	
@@ -0,0 +1,129 @@
+let text = "I love JavaScript!";
+console.log(text.match(/javascript/));
+
+let text = "I love JavaScript!";
+console.log(text.match(/javascript/i));
+
+let text = "I love JavaScript!";
+console.log(text.match(/javascript|nodejs|react/i));
+
+let text = "I love React and JavaScript!";
+console.log(text.match(/javascript|nodejs|react/i));
+
+let text = "I love React and JavaScript!";
+console.log(text.match(/javascript|nodejs|react/gi));
+
+let text = "d";
+console.log(text.match(/[abc]/gi));
+console.log(text.match(/[a-zA-Z0-9]/));
+
+let text = "Just some text.";
+console.log(text.match(/./g));
+
+let text = "Just some text.";
+console.log(text.match(/\./g));
+
+let text = "I'm 29 years old.";
+console.log(text.match(/\d/g));
+
+let text = "Coding is a lot of fun!";
+console.log(text.match(/\s/g));
+
+let text = "In the end or at the beginning?";
+console.log(text.match(/\bin/gi));
+
+let text = "I love JavaScript!";
+console.log(text.match(/(love|hate)\s(javascript|spiders)/gi));
+
+console.log(text.match(/[a-zA-Z0-9][a-zA-Z0-9][a-zA-Z0-9][a-zA-Z0-9]/));
+
+let text = "123123123";
+console.log(text.match(/(123)+/g));
+
+let text = "abcabcabcabc";
+console.log(text.match(/(abc){1,2}/));
+
+let text = "That's not the case.";
+console.log(text.search(/CaSE/i));
+
+let text = "Coding is fun. Coding opens up a lot of opportunities.";
+console.log(text.replace("Coding", "Javascript"));
+
+let text = "Coding is fun. Coding opens up a lot of opportunities.";
+console.log(text.replace(/Coding/g, "Javascript"));
+
+(function () {
+  console.log("IIFE!");
+})();
+
+function test(a, b, c) {
+  console.log("first:", a, arguments[0]);
+  console.log("second:", a, arguments[1]);
+  console.log("third:", a, arguments[2]);
+}
+
+test("fun", "js", "secrets");
+
+function test(a, b, c) {
+  a = "nice";
+  arguments[1] = "JavaScript";
+  console.log("first:", a, arguments[0]);
+  console.log("second:", a, arguments[1]);
+  console.log("third:", a, arguments[2]);
+}
+
+test("fun", "js", "secrets");
+
+("use strict");
+var x;
+x = 5;
+console.log(x);
+
+x = 5;
+console.log(x);
+var x;
+
+function sayHi() {
+  greeting = "Hello!";
+  console.log(greeting);
+}
+
+document.cookie = "name=Maaike;favoriteColor=black";
+let cookie = decodeURIComponent(document.cookie);
+let cookieList = decodedCookie.split(";");
+for (let i = 0; i < cookieList.length; i++) {
+  let c = cookieList[i];
+  if (c.charAt(0) == " ") {
+    c = c.trim();
+  }
+  if (c.indexOf("name") == 0) {
+    return c.substring(4, c.length); //start one later to skip =
+  }
+}
+
+function somethingVeryDangerous() {
+  throw Error;
+}
+
+try {
+  somethingVeryDangerous();
+} catch (e) {
+  if (e instanceof TypeError) {
+    // deal with TypeError exceptions
+  } else if (e instanceof RangeError) {
+    // deal with RangeError exceptions
+  } else if (e instanceof EvalError) {
+    // deal with EvalError exceptions
+  } else {
+    //deal with all other exceptions
+    throw e; //rethrow
+  }
+}
+
+try {
+  trySomething();
+} catch (e) {
+  console.log("Oh oh");
+} finally {
+  console.log("Error or no error, I will be logged!");
+}
diff --git a/Chapter 13/ch13-browser-supporting-file-reader.html b/Chapter 13/ch13-browser-supporting-file-reader.html
new file mode 100755
index 0000000..b7c63a0
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-animation.html b/Chapter 13/ch13-canvas-animation.html
new file mode 100755
index 0000000..d40f0eb
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-circle.html b/Chapter 13/ch13-canvas-circle.html
new file mode 100755
index 0000000..64ce4d7
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-draw-mouse.html b/Chapter 13/ch13-canvas-draw-mouse.html
new file mode 100755
index 0000000..7a622cb
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-drawing-canvas.html b/Chapter 13/ch13-canvas-drawing-canvas.html
new file mode 100755
index 0000000..81a1b5d
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-lines.html b/Chapter 13/ch13-canvas-lines.html
new file mode 100755
index 0000000..cee95f5
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-save-image.html b/Chapter 13/ch13-canvas-save-image.html
new file mode 100755
index 0000000..27d7f2a
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-saving-image.html b/Chapter 13/ch13-canvas-saving-image.html
new file mode 100755
index 0000000..1aad4c2
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas-text.html b/Chapter 13/ch13-canvas-text.html
new file mode 100755
index 0000000..75a9952
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-canvas.html b/Chapter 13/ch13-canvas.html
new file mode 100755
index 0000000..68cca19
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-drawing-image.html b/Chapter 13/ch13-drawing-image.html
new file mode 100755
index 0000000..0c49e2f
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-geo-getlocation.html b/Chapter 13/ch13-geo-getlocation.html
new file mode 100755
index 0000000..d1f221c
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-inspect-geo.html b/Chapter 13/ch13-inspect-geo.html
new file mode 100755
index 0000000..27e4c8d
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-localstorage.html b/Chapter 13/ch13-localstorage.html
new file mode 100755
index 0000000..e760139
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-media.html b/Chapter 13/ch13-media.html
new file mode 100755
index 0000000..b1215d8
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-reading-file.html b/Chapter 13/ch13-reading-file.html
new file mode 100755
index 0000000..55aca2f
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-upload-file.html b/Chapter 13/ch13-upload-file.html
new file mode 100755
index 0000000..92ed0e3
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13-upload-files.html b/Chapter 13/ch13-upload-files.html
new file mode 100755
index 0000000..783477e
--- /dev/null
+++ b/Chapter 13/ch13-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/Chapter 13/ch13.js b/Chapter 13/ch13.js
new file mode 100755
index 0000000..7fa387a
--- /dev/null
+++ b/Chapter 13/ch13.js	
@@ -0,0 +1,6 @@
+let varContainingFunction = function () {
+  let varInFunction = "I'm in a function.";
+  console.log("hi there!");
+};
+
+varContainingFunction();
diff --git a/Chapter 14/ch14-ajax.html b/Chapter 14/ch14-ajax.html
new file mode 100755
index 0000000..ef90287
--- /dev/null
+++ b/Chapter 14/ch14-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/Chapter 14/ch14-example-json.json b/Chapter 14/ch14-example-json.json
new file mode 100755
index 0000000..c7928fc
--- /dev/null
+++ b/Chapter 14/ch14-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/Chapter 14/ch14-express.js b/Chapter 14/ch14-express.js
new file mode 100755
index 0000000..e13267f
--- /dev/null
+++ b/Chapter 14/ch14-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/Chapter 14/ch14-jquery.html b/Chapter 14/ch14-jquery.html
new file mode 100755
index 0000000..da80efc
--- /dev/null
+++ b/Chapter 14/ch14-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/Chapter 14/ch14-node.js b/Chapter 14/ch14-node.js
new file mode 100755
index 0000000..1f09738
--- /dev/null
+++ b/Chapter 14/ch14-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/Chapter 14/ch14-vue-component.html b/Chapter 14/ch14-vue-component.html
new file mode 100755
index 0000000..b126e3b
--- /dev/null
+++ b/Chapter 14/ch14-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/Chapter 14/ch14-vue.html b/Chapter 14/ch14-vue.html
new file mode 100755
index 0000000..e2ce949
--- /dev/null
+++ b/Chapter 14/ch14-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/Chapter3/ch3.js b/Chapter3/ch3.js
new file mode 100755
index 0000000..675884e
--- /dev/null
+++ b/Chapter3/ch3.js
@@ -0,0 +1,181 @@
+arr1 = new Array("purple", "green", "yellow");
+arr2 = ["black", "orange", "pink"];
+
+arr3 = new Array(10);
+arr4 = [10];
+
+console.log(arr3);
+console.log(arr4);
+
+cars = ["Toyota", "Renault", "Volkswagen"];
+console.log(cars[0]);
+console.log(cars[1]);
+console.log(cars[2]);
+console.log(cars[3]);
+console.log(cars[-1]);
+
+cars[0] = "Tesla";
+console.log(cars[0]);
+
+cars[3] = "Kia";
+cars[-1] = "Fiat";
+console.log(cars[3]);
+console.log(cars[-1]);
+
+colors = ["black", "orange", "pink"]
+booleans = [true, false, false, true];
+emptyArray = [];
+
+console.log("Length of colors:", colors.length);
+console.log("Length of booleans:", booleans.length);
+console.log("Length of emtpy array:", emptyArray.length);
+
+lastElement = colors[colors.length - 1];
+console.log(lastElement);
+
+numbers = [12, 24, 36];
+numbers[-1] = 0;
+numbers[5] = 48;
+console.log(numbers.length);
+
+console.log("numbers", numbers);
+
+favoriteFruits = ["grapefruit", "orange", "lemon"];
+favoriteFruits.push("tangerine");
+
+let lengthOfFavoriteFruits = favoriteFruits.push("lime");
+console.log(lengthOfFavoriteFruits);
+console.log(favoriteFruits);
+
+let arrOfShapes = ["circle", "triangle", "rectangle", "pentagon"];
+arrOfShapes.splice(2, 0, "square", "trapezoid");
+console.log(arrOfShapes);
+
+let arr5 = [1, 2, 3];
+let arr6 = [4, 5, 6];
+let arr7 = arr5.concat(arr6);
+console.log(arr7);
+
+let arr8 = arr7.concat(7, 8, 9);
+console.log(arr8);
+
+arr8.pop();
+console.log(arr8);
+
+arr8.shift();
+console.log(arr8);
+
+arr8.splice(1, 3);
+console.log(arr8);
+
+delete arr8[0];
+console.log(arr8); 
+
+let findValue = arr8.find(() => e === 6);
+let findValue2 = arr8.find(() => e === 8);
+console.log(findValue, findValue2);
+
+let findIndex = arr8.indexOf(6);
+let findIndex2 = arr8.indexOf(10);
+let findIndex3 = arr8.indexOf(6, 2);
+console.log(findIndex, findIndex2, findIndex3);
+
+let animals = ["dog", "horse", "cat", "platypus", "dog"]
+let lastDog = animals.lastIndexOf("dog");
+console.log(lastDog);
+
+
+let names = ["James", "Alicia", "Fatiha", "Maria", "Bert"];
+names.sort();
+
+let ages = [18, 72, 33, 56, 40];
+ages.sort();
+
+console.log(names);
+console.log(ages);
+
+names.reverse();
+console.log(names);
+
+console.log(typeof arr1);
+
+let dog = { dogName: "JavaScript", 
+            weight: 2.4, 
+            color: "brown", 
+            breed: "chihuahua", 
+            age: 3, 
+            burglarBiter: true 
+          };
+
+let dogColor1 = dog["color"];
+let dogColor2 = dog.color;
+
+
+dog["color"] = "blue";
+dog.weight = 2.3;
+
+let company = { companyName: "Healthy Candy",
+                activity: "food manufacturing",
+                address: {
+                  street: "2nd street",
+                  number: "123",
+                  zipcode: "33116",
+                  city: "Miami",
+                  state: "Florida"
+                },
+                yearOfEstablishment: 2021 
+              };
+
+company.address.zipcode = "33117";
+company["address"]["number"] = "100";
+
+console.log(company);
+
+let company2 = { companyName: "Healthy Candy",
+                activities: ["food manufacturing", "improving kids' health", "manufacturing toys"],
+                address: {
+                  street: "2nd street",
+                  number: "123",
+                  zipcode: "33116",
+                  city: "Miami",
+                  state: "Florida"
+                },
+                yearOfEstablishment: 2021 
+              };
+
+let activity = company2.activities[1];
+console.log(activity);
+
+let addresses = [{
+    street: "2nd street",
+    number: "123",
+    zipcode: "33116",
+    city: "Miami",
+    state: "Florida"
+  },
+  {
+    street: "1st West avenue",
+    number: "5",
+    zipcode: "75001",
+    city: "Addison",
+    state: "Texas"
+  }];
+
+  let company3 = { companyName: "Healthy Candy",
+                    activities: ["food manufacturing", "improving kids' health", "manufacturing toys"],
+                    address: [{
+                      street: "2nd street",
+                      number: "123",
+                      zipcode: "33116",
+                      city: "Miami",
+                      state: "Florida"
+                    },
+                    {
+                      street: "1st West avenue",
+                      number: "5",
+                      zipcode: "75001",
+                      city: "Addison",
+                      state: "Texas"
+                    }],
+                    yearOfEstablishment: 2021 
+                  };
\ No newline at end of file
diff --git a/chapter 1/ch1.js b/chapter 1/ch1.js
new file mode 100755
index 0000000..ba0e107
--- /dev/null
+++ b/chapter 1/ch1.js	
@@ -0,0 +1,13 @@
+let status = "new";
+let scared = true;
+if (status === "new") {
+  console.log("Welcome to JavaScript!");
+  if (scared) {
+    console.log("Don't worry you will be fine!");
+  } else {
+    console.log("You're brave! You are going to do great!");
+  }
+} else {
+  console.log("Welcome back, I new you'd like it!");
+}
+
diff --git a/chapter 1/ch1_alert.js b/chapter 1/ch1_alert.js
new file mode 100755
index 0000000..2a02142
--- /dev/null
+++ b/chapter 1/ch1_alert.js	
@@ -0,0 +1,2 @@
+//alert("Saying hi from a different file!");
+prompt("Hi! How are you?");
\ No newline at end of file
diff --git a/chapter 1/ch1_popup1.html b/chapter 1/ch1_popup1.html
new file mode 100755
index 0000000..1149ebf
--- /dev/null
+++ b/chapter 1/ch1_popup1.html	
@@ -0,0 +1,5 @@
+<html>
+  <script type="text/javascript">
+    alert("Hi there!");
+  </script>
+</html>
\ No newline at end of file
diff --git a/chapter 1/ch1_popup2.html b/chapter 1/ch1_popup2.html
new file mode 100755
index 0000000..0b4d3a5
--- /dev/null
+++ b/chapter 1/ch1_popup2.html	
@@ -0,0 +1,3 @@
+<html>
+  <script type="text/javascript" src="ch1_alert.js"></script>
+</html>
\ No newline at end of file
diff --git a/chapter 6/ch6.js b/chapter 6/ch6.js
new file mode 100755
index 0000000..1e8fa73
--- /dev/null
+++ b/chapter 6/ch6.js	
@@ -0,0 +1,220 @@
+function hiThere() {
+  let you = prompt("What's your name? ");
+  console.log("Hello", you, "!");
+}
+
+hiThere();
+
+console.log("this is an argument");
+prompt("argument here too");
+
+let arr = [];
+arr.push("argument");
+
+function addTwoNumbers(x, y) {
+  console.log(x + y);
+}
+
+addTwoNumbers(3, 4);
+addTwoNumbers(12, -90);
+
+function myFunc(param1, param2) {
+  // code of the function;
+}
+
+myFunc("arg1", "arg2");
+
+function addTwoNumbers(x = 2, y = 3) {
+  console.log(x + y);
+}
+
+addTwoNumbers();
+addTwoNumbers(6, 6);
+addTwoNumbers(10);
+
+let favoriteSubject = prompt("What is your favorite subject?");
+
+let result = addTwoNumbers(4, 5);
+console.log(result);
+
+function addTwoNumbers(x, y) {
+  return x + y;
+}
+
+let results = [];
+
+for (let i = 0; i < 10; i++) {
+  let result = addTwoNumbers(i, 2 * i);
+  results.push(result);
+}
+
+console.log(results);
+
+function testAvailability(x) {
+  console.log("Available here:", x);
+}
+
+testAvailability("Hi!");
+console.log("Not available here:", x);
+
+function testAvailability() {
+  let y = "Local variable!";
+  console.log("Available here:", y);
+}
+
+testAvailability();
+console.log("Not available here:", y);
+
+function testAvailability() {
+  let y = "I'll return";
+  console.log("Available here:", y);
+  return y;
+}
+
+let z = testAvailability();
+console.log("Outside the function:", z);
+console.log("Not available here:", y);
+
+let globalVar = "Accessible everywhere!";
+console.log("Outside function:", globalVar);
+
+function creatingNewScope(x) {
+  console.log("Access to global variables from inside functions.", globalVar);
+}
+
+creatingNewScope("some parameter");
+
+console.log("Still available:", globalVar);
+
+function doingStuff() {
+  if (true) {
+    var x = "local";
+  }
+  console.log(x);
+}
+
+doingStuff();
+
+function doingStuff() {
+  if (true) {
+    let x = "local";
+  }
+  console.log(x);
+}
+
+doingStuff();
+
+let x = "global";
+
+function doingStuff() {
+  let x = "local";
+  console.log(x);
+}
+
+doingStuff();
+
+var x = "global";
+
+function confuseReader() {
+  x = "Guess my scope...";
+  console.log("Inside the function:", x);
+}
+
+confuseReader();
+console.log("Outside of function:", x);
+
+function getRecursive(nr) {
+  console.log(nr);
+  getRecursive(--nr);
+}
+
+getRecursive(3);
+
+function logRecursive(nr) {
+  console.log("Started function:", nr);
+  if (nr > 0) {
+    logRecursive(nr - 1);
+  } else {
+    console.log("done with recursion");
+  }
+  console.log("Ended function:", nr);
+}
+
+logRecursive(3);
+
+function getRecursive(nr) {
+  console.log(nr);
+  if (nr > 0) {
+    getRecursive(--nr);
+  }
+}
+
+getRecursive(3);
+
+function calcFactorial(nr) {
+  if (nr === 0) {
+    return 1;
+  } else {
+    return nr * calcFactorial(--nr);
+  }
+}
+
+function doingStuffAnonymously() {
+  console.log("Not so secret though.");
+}
+
+let functionVariable = function () {
+  console.log("Not so secret though.");
+};
+
+functionVariable();
+
+function doFlexibleStuff(executeStuff) {
+  executeStuff();
+  console.log("Inside doFlexibleStuffFunction.");
+}
+
+doFlexibleStuff(functionVariable);
+
+let anotherFunctionVariable = function () {
+  console.log("Another anonymous function implementation.");
+};
+
+doFlexibleStuff(anotherFunctionVariable);
+
+function doOuterFunctionStuff(nr) {
+  console.log("Outer function");
+  doInnerFunctionStuff(nr);
+  function doInnerFunctionStuff(x) {
+    console.log(x + 7);
+    console.log("I can access outer variables:", nr);
+  }
+}
+
+doOuterFunctionStuff(2);
+
+function doOuterFunctionStuff(nr) {
+  doInnerFunctionStuff(nr);
+  function doInnerFunctionStuff(x) {
+    let z = 10;
+  }
+  console.log("Not accessible:", z);
+}
+
+doOuterFunctionStuff(2);
+
+function doOuterFunctionStuff(nr) {
+  doInnerFunctionStuff(nr);
+  function doInnerFunctionStuff(x) {
+    let z = 10;
+  }
+}
+
+doInnerFunctionStuff(3);
+
+let youGotThis = function () {
+  console.log("You're doing really well, keep coding!");
+};
+
+setTimeout(youGotThis, 1000);
+setInterval(youGotThis, 1000);
diff --git a/chapter10/ch10-animate.html b/chapter10/ch10-animate.html
new file mode 100755
index 0000000..0d9a6fc
--- /dev/null
+++ b/chapter10/ch10-animate.html
@@ -0,0 +1,30 @@
+<html>
+  <style>
+    div {
+      background-color: purple;
+      width: 100px;
+      height: 100px;
+      position: absolute;
+    }
+  </style>
+  <body>
+    <button onclick="toTheRight()">Go right</button>
+    <div id="block"></div>
+
+    <script>
+      function toTheRight() {
+        let b = document.getElementById("block");
+        let x = 0;
+        setInterval(function () {
+          if (x === 600) {
+            clearInterval();
+          } else {
+            x++;
+            b.style.left = x + "px";
+          }
+        }, 2);
+        
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-dragdrop.html b/chapter10/ch10-dragdrop.html
new file mode 100755
index 0000000..7ab766c
--- /dev/null
+++ b/chapter10/ch10-dragdrop.html
@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <style>
+      .box {
+        height: 200px;
+        width: 200px;
+        padding: 20px;
+        margin: 0 50px;
+        display: inline-block;
+        border: 1px solid black;
+      }
+
+      #dragme {
+        background-color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="box" ondrop="dDrop()" ondragover="nDrop()">
+      1
+      <div id="dragme" ondragstart="dStart()" draggable="true">
+        Drag Me Please!
+      </div>
+    </div>
+    <div class="box" ondrop="dDrop()" ondragover="nDrop()">2</div>
+   <script>
+      let holderItem;
+
+      function dStart() {
+        holderItem = event.target;
+      }
+
+      function nDrop() {
+        event.preventDefault();
+      }
+
+      function dDrop() {
+       // event.preventDefault();
+        if (event.target.className == "box") {
+          event.target.appendChild(holderItem);
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-eventtarget.html b/chapter10/ch10-eventtarget.html
new file mode 100755
index 0000000..3c48b7a
--- /dev/null
+++ b/chapter10/ch10-eventtarget.html
@@ -0,0 +1,10 @@
+<html>
+  <body>
+    <button type="button" onclick="triggerSomething()">Click</button>
+    <script>
+      function triggerSomething() {
+        console.dir(event.target);
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-formcontent.html b/chapter10/ch10-formcontent.html
new file mode 100755
index 0000000..774a4e6
--- /dev/null
+++ b/chapter10/ch10-formcontent.html
@@ -0,0 +1,21 @@
+<html>
+  <body>
+    <div id="welcome">Hi there!</div>
+    <form>
+      <input type="text" name="firstname" placeholder="First name" />
+      <input type="text" name="lastname" placeholder="Last name" />
+      <input type="button" onclick="sendInfo()" value="Submit" />
+    </form>
+    <script>
+      function sendInfo() {
+        console.dir(event);
+        let p = event.target.parentElement;
+        message("Welcome " + p.firstname.value + " " + p.lastname.value);
+      }
+
+      function message(m) {
+        document.getElementById("welcome").innerHTML = m;
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-formsubmit.html b/chapter10/ch10-formsubmit.html
new file mode 100755
index 0000000..e48855f
--- /dev/null
+++ b/chapter10/ch10-formsubmit.html
@@ -0,0 +1,8 @@
+<html>
+  <body>
+    <form action="anotherpage.html" method="get" onsubmit="doStuff()">
+      <input type="text" placeholder="name" name="name" />
+      <input type="submit" value="send" />
+    </form>
+  </body>
+</html>
diff --git a/chapter10/ch10-formsubmitreturn.html b/chapter10/ch10-formsubmitreturn.html
new file mode 100755
index 0000000..c3697dd
--- /dev/null
+++ b/chapter10/ch10-formsubmitreturn.html
@@ -0,0 +1,33 @@
+<html>
+  <body>
+    <div id="wrapper"></div>
+    <form action="anotherpage.html" method="get" onsubmit="return valForm()">
+      <input type="text" id="firstName" name="firstName" placeholder="First name" />
+      <input type="text" id="lastName" name="lastName" placeholder="Last name" />
+      <input type="text" id="age" name="age" placeholder="Age" />
+      <input type="submit" value="submit" />
+    </form>
+    <script>
+      function valForm() {
+        var p = event.target.children;
+        if (p.firstName.value == "") {
+          message("Need a first name!!");
+          return false;
+        }
+        if (p.lastName.value == "") {
+          message("Need a last name!!");
+          return false;
+        }
+        if (p.age.value == "") {
+          message("Need an age!!");
+          return false;
+        }
+        return true;
+      }
+
+      function message(m) {
+        document.getElementById("wrapper").innerHTML = m;
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-keyevent.html b/chapter10/ch10-keyevent.html
new file mode 100755
index 0000000..0e01b27
--- /dev/null
+++ b/chapter10/ch10-keyevent.html
@@ -0,0 +1,23 @@
+<html>
+  <body>
+    <body>
+      <div id="wrapper">JavaScript is fun!</div>
+      <input type="text" name="myNum1" onkeypress="numCheck()">
+      <input type="text" name="myNum2" onkeypress="numCheck2()">
+      <script>
+        function numCheck() {
+            message("Number: " + !isNaN(event.key));
+            return !isNaN(event.key);
+        }
+
+        function numCheck2() {
+            message("Not a number: " + isNaN(event.key));
+            return isNaN(event.key);
+        }
+
+        function message(m) {
+            document.getElementById('wrapper').innerHTML = m;
+        }
+      </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter10/ch10-keyeventreturn.html b/chapter10/ch10-keyeventreturn.html
new file mode 100755
index 0000000..cb9771f
--- /dev/null
+++ b/chapter10/ch10-keyeventreturn.html
@@ -0,0 +1,23 @@
+<html>
+  <body>
+    <body>
+      <div id="wrapper">JavaScript is fun!</div>
+      <input type="text" name="myNum1" onkeypress="return numCheck()" onpaste="return false">
+      <input type="text" name="myNum2" onkeypress="return numCheck2()" onpaste="return false">
+      <script>
+        function numCheck() {
+            message(!isNaN(event.key));
+            return !isNaN(event.key);
+        }
+
+        function numCheck2() {
+            message(isNaN(event.key));
+            return isNaN(event.key);
+        }
+
+        function message(m) {
+            document.getElementById('wrapper').innerHTML = m;
+        }
+      </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter10/ch10-mouseevents.html b/chapter10/ch10-mouseevents.html
new file mode 100755
index 0000000..8cacf4c
--- /dev/null
+++ b/chapter10/ch10-mouseevents.html
@@ -0,0 +1,11 @@
+
+<html>
+  <body>
+    <div id="divvy" onmouseup="changeColor()" style="width: 100px; height: 100px; background-color: pink;">
+    <script>
+      function changeColor() {
+        document.getElementById("divvy").style.backgroundColor = "blue";
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-mouseevents2.html b/chapter10/ch10-mouseevents2.html
new file mode 100755
index 0000000..00c8df0
--- /dev/null
+++ b/chapter10/ch10-mouseevents2.html
@@ -0,0 +1,20 @@
+
+<html>
+  <body>
+    <div id="divvy" style="width: 100px; height: 100px; background-color: pink;">
+    <script>
+      window.onload = function donenow() {
+        console.log("hi");
+        document.getElementById("divvy").addEventListener("mousedown", function() { changeColor(this, "green"); });
+        document.getElementById("divvy").addEventListener("mouseup", function() { changeColor(this, "yellow"); });
+        document.getElementById("divvy").addEventListener("dblclick", function() { changeColor(this, "black"); });
+        document.getElementById("divvy").addEventListener("mouseout", function() { changeColor(this, "blue"); });
+      }
+      console.log("hi2");
+
+      function changeColor(el, color) {
+        el.style.backgroundColor = color;
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-onchang-onblur.html b/chapter10/ch10-onchang-onblur.html
new file mode 100755
index 0000000..f3977e0
--- /dev/null
+++ b/chapter10/ch10-onchang-onblur.html
@@ -0,0 +1,29 @@
+<html>
+  <body>
+    <div id="welcome">Hi there!</div>
+    <form>
+      <input type="text" name="firstname" placeholder="First name" onchange="logEvent()" />
+      <input type="text" name="lastname" placeholder="Last name" onblur="logEvent()" />
+      <input type="button" onclick="sendInfo()" value="Submit" />
+    </form>
+    <script>
+      function logEvent() {
+        let p = event.target;
+        if (p.name == "firstname") {
+          message("First Name Changed to  " + p.value);
+        } else {
+          message("Last Name Changed to  " + p.value);
+        }
+      }
+
+      function sendInfo() {
+        let p = event.target.parentElement;
+        message("Welcome " + p.firstname.value + " " + p.lastname.value);
+      }
+
+      function message(m) {
+        document.getElementById("welcome").innerHTML = m;
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter10/ch10-specifyingevents.html b/chapter10/ch10-specifyingevents.html
new file mode 100755
index 0000000..8e3cc0c
--- /dev/null
+++ b/chapter10/ch10-specifyingevents.html
@@ -0,0 +1,13 @@
+
+<html>
+  <body>
+    <p id="unique" onclick="magic()">Click here for magic!</p>
+
+    <script>
+      document.getElementById("unique").onclick = function() { magic() };
+      document.getElementById("unique").addEventListener("click", magic);
+      document.getElementById("unique").addEventListener("click", function() { magic(arg1, arg2) });
+
+    </script>
+  </body>
+</html>
diff --git a/chapter2/ch2.js b/chapter2/ch2.js
new file mode 100755
index 0000000..82254e8
--- /dev/null
+++ b/chapter2/ch2.js
@@ -0,0 +1,184 @@
+// let firstname = "Maria";
+// firstname = "Jacky";
+
+// let nr1 = 12;
+// var nr2 = 8;
+// const pi = 3.14159;
+
+// throws a TypeError
+// const someConstant = 3;
+// someConstant = 4;
+
+// let singleString = 'Hi there!';
+// let doubleString = "How are you?";
+
+// let language = "JavaScript";
+// let message = `Let's learn ${language}`;
+// console.log(message);
+
+// let intNr = 1;
+// let decNr = 1.5;
+// let expNr = 1.4e15;
+
+// let bigNr = 90071992547409920n;
+// typeError
+// let result = bigNr + intNr;
+
+// let bool1 = false;
+// let bool2 = true;
+// console.log(typeof bool1)
+
+// let str1 = "JavaScript is fun!";
+// let str2 = "JavaScript is fun!";
+// console.log("These two strings are the same:", str1 === str2);
+
+// let sym1 = Symbol("JavaScript is fun!");
+// let sym2 = Symbol("JavaScript is fun!");
+// console.log("These two Symbols are the same:", sym1 === sym2);
+
+// let unassigned;
+// console.log(unassigned);
+
+// let terribleThingToDo = undefined;
+// let lastname;
+// console.log("Same undefined:", lastname === terribleThingToDo);
+
+// let betterOption = null;
+// console.log("Same null:", lastname === betterOption);
+
+// let empty = null;
+
+// let nr1 = 2;
+// let nr2 = "2";
+// console.log(nr1 * nr2);
+
+// let nr1 = 2;
+// let nr2 = "2";
+// console.log(nr1 + nr2);
+
+// let nrToStr = 6;
+// nrToStr = String(nrToStr);
+// console.log(nrToStr, typeof nrToStr);
+
+// let strToNr = "12";
+// strToNr = Number(strToNr);
+// console.log(strToNr, typeof strToNr);
+
+// let strToBool = "any string will return true";
+// strToBool = Boolean(strToBool);
+// console.log(strToBool, typeof strToBool);
+
+// let nullToNr = null;
+// nullToNr = Number(nullToNr);
+// console.log("null", nullToNr, typeof nullToNr);
+
+// let strToNr = "";
+// strToNr = Number(strToNr);
+// console.log("empty string", strToNr, typeof strToNr);
+
+// let strToNr2 = "hello";
+// strToNr2 = Number(strToNr2);
+// console.log(strToNr2, typeof strToNr2);
+
+// let strToBool = "";
+// strToBool = Boolean(strToBool);
+// console.log(strToBool, typeof strToBool);
+
+// let strToBool2 = "false";
+// strToBool2 = Boolean(strToBool2);
+// console.log(strToBool2, typeof strToBool2);
+
+// let nr1 = 2;
+// let nr2 = "2";
+// console.log(nr1 + Number(nr2));
+
+// let str = "Hello, what's your name? Is it \"Mike\"?";
+// console.log(str);
+// let str2 = 'Hello, what\'s your name? Is it "Mike"?';
+// console.log(str2);
+
+// let str3 = "New \nline."
+// let str4 = "I'm containing a backslash: \\!";
+// console.log(str3);
+// console.log(str4);
+
+// let str = "Hello";
+// let nr = 7;
+// let bigNr = 12345678901234n;
+// let bool = true;
+// let sym = Symbol("unique");
+// let undef = undefined;
+// let unknown = null;
+
+// console.log("str", typeof str);
+// console.log("nr", typeof nr);
+// console.log("bigNr", typeof bigNr);
+// console.log("bool", typeof bool);
+// console.log("sym", typeof sym);
+// console.log("undef", typeof undef);
+// console.log("unknown", typeof unknown);
+
+// let nr1 = 12;
+// let nr2 = 14;
+// let str1 = "Hello ";
+// let str2 = "addition";
+// let result1 = nr1 + nr2;
+// let result2 = str1 + str2;
+// console.log(result1, result2);
+
+// let nr1 = 20;
+// let nr2 = 4;
+// let str1 = "Hi ";
+// let nr3 = 3;
+// let result1 = nr1 - nr2;
+// let result2 = str1 - nr3;
+// console.log(result1, result2);
+
+// let nr1 = 15;
+// let nr2 = 10;
+// let str1 = "Hi";
+// let nr3 = 3;
+// let result1 = nr1 * nr2;
+// let result2 = str1 * nr3;
+// console.log(result1, result2);
+
+// let nr1 = 30;
+// let nr2 = 5;
+// let result1 = nr1 / nr2;
+// console.log(result1);
+
+// let nr1 = 2;
+// let nr2 = 3;
+// let result1 = nr1 ** nr2;
+// console.log(result1);
+
+// let nr1 = 10;
+// let nr2 = 3;
+// let result1 = nr1 % nr2;
+// console.log(`${nr1} % ${nr2} = ${result1}`);
+
+// let nr3 = 8;
+// let nr4 = 2;
+// let result2 = nr3 % nr4;
+// console.log(`${nr3} % ${nr4} = ${result2}`);
+
+// let nr5 = 15;
+// let nr6 = 4;
+// let result3 = nr5 % nr6;
+// console.log(`${nr5} % ${nr6} = ${result3}`);
+
+// let nr = 4;
+// nr++;
+// console.log(nr);
+
+// let nr = 2;
+// console.log(nr++);
+// console.log(nr);
+
+// let nr = 2;
+// console.log(++nr);
+
+let nr1 = 4;
+let nr2 = 5;
+let nr3 = 2;
+console.log(nr1++ + ++nr2 * nr3++);
\ No newline at end of file
diff --git a/chapter4/ch4.js b/chapter4/ch4.js
new file mode 100755
index 0000000..8d3f229
--- /dev/null
+++ b/chapter4/ch4.js
@@ -0,0 +1,171 @@
+// let rain = true;
+
+// if(rain){
+//   console.log("** Taking my umbrella when I need to go outside **");
+// } else {
+//   console.log("** I can leave my umbrella at home **");
+// }
+
+// if(expression) {
+//   // code associated with the if block
+//   // will only be executed if the expression is true
+// } else {
+//   // code associated with the else block
+//   // we don't need an else block, it is optional
+//   // this code will only be executed if the expression is false
+// }
+
+let age = 16;
+
+if(age < 18) {
+  console.log("We're very sorry, but you can't get in under 18");
+} else {
+  console.log("Welcome!");
+}
+
+if(age < 3){
+  console.log("Access is free under three.");
+} else if(age >=3 && age < 12) {
+  console.log("With the child discount, the access fee is 5 dollar");
+} else if(age >=12 && age < 65) {
+  console.log("A regular ticket costs 10 dollar.");
+} else if(age >= 65) {
+  console.log("A ticket is 7 dollars.");
+}
+
+if(age < 3){
+  console.log("Access is free under three.");
+} else if(age < 12) {
+  console.log("With the child discount, the access fee is 5 dollar");
+} else if(age < 65) {
+  console.log("A regular ticket costs 10 dollar.");
+} else if(age >= 65) {
+  console.log("A ticket is 7 dollars.");
+}
+
+let access = age < 18 ? "denied" : "allowed";
+console.log(access);
+
+age < 18 ? console.log("denied") : console.log("allowed");
+
+let activity = "Lunch";
+
+if(activity === "Get up") {
+  console.log("It is 6:30AM");
+} else if(activity === "Breakfast") {
+  console.log("It is 7:00AM");
+} else if(activity === "Drive to work") {
+  console.log("It is 8:00AM");
+} else if(activity === "Lunch") {
+  console.log("It is 12.00PM");
+} else if(activity === "Drive home") {
+  console.log("It is 5:00PM")
+} else if(activity === "Dinner") {
+  console.log("It is 6:30PM");
+} 
+
+switch(expression) {
+  case value1:
+    // code to be executed
+    break;
+  case value2:
+    // code to be executed
+    break;
+  case value-n:
+    // code to be executed
+    break;
+}
+
+switch(activity) {
+  case "Get up":
+    console.log("It is 6:30AM");
+    break;
+  case "Breakfast":
+    console.log("It is 7:00AM");
+    break;
+  case "Drive to work":
+    console.log("It is 8:00AM");
+    break;
+  case "Lunch":
+    console.log("It is 12:00PM");
+    break;  
+  case "Drive home":
+    console.log("It is 5:00AM");
+    break;    
+  case "Dinner":
+    console.log("It is 6:30PM");
+    break;
+}
+
+switch(expression) {
+  case value1:
+    // code to be executed
+    break;
+  case value2:
+    // code to be executed
+    break;
+  case value-n:
+    // code to be executed
+    break;
+  default:
+    // code to be executed when no cases match
+    break;
+}
+
+if(false) {
+  // omitted to not make this unnecessarily long
+} else {
+  console.log("I don't know this activity and cannot determine the current time.")
+}
+
+switch(activity) {
+  case "Get up":
+    console.log("It is 6:30AM");
+    break;
+  case "Breakfast":
+    console.log("It is 7:00AM");
+    break;
+  case "Drive to work":
+    console.log("It is 8:00AM");
+    break;
+  case "Lunch":
+    console.log("It is 12:00PM");
+    break;  
+  case "Drive home":
+    console.log("It is 5:00AM");
+    break;    
+  case "Dinner":
+    console.log("It is 6:30PM");
+    break;
+  default:
+    console.log("I cannot determine the current time.");
+    break;
+}
+
+let grade = "F";
+
+switch(grade){
+  case "F":
+  case "D":
+    console.log("You've failed!");
+    break;
+  case "C":
+  case "B":
+    console.log("You've passed");
+    break;
+  case "A":
+    console.log("Nice!");
+    break;
+  default:
+    console.log("I don't know this grade.");
+}
+
+if(grade === "F" || grade === "D") {
+  console.log("You've failed!");
+} else if(grade === "C" || grade === "B") {
+  console.log("You've passed");
+} else if(grade === "A") {
+  console.log("Nice!");
+} else {
+  console.log("I don't know this grade.");
+}
\ No newline at end of file
diff --git a/chapter5/ch5.js b/chapter5/ch5.js
new file mode 100755
index 0000000..a373629
--- /dev/null
+++ b/chapter5/ch5.js
@@ -0,0 +1,232 @@
+let i = 0;
+while (i < 10) {
+  console.log(i);
+  i++;
+}
+
+let someArray = ["Mike", "Antal", "Marc", "Emir", "Louiza", "Jacky"];
+let notFound = true;
+
+while (notFound && someArray.length > 0) {
+  if (someArray[0] === "Louiza") {
+    console.log("Found her!");
+    notFound = false;
+  } else {
+    someArray.shift();
+  }
+}
+
+console.log(someArray);
+
+let nr1 = 0;
+let nr2 = 1;
+let temp;
+fibonacciArray = [];
+
+while (fibonacciArray.length < 25) {
+  fibonacciArray.push(nr1);
+  temp = nr1 + nr2;
+  nr1 = nr2;
+  nr2 = temp;
+}
+
+console.log(fibonacciArray);
+
+do {
+  // code to be executed if the condition is true
+} while (true);
+
+let number;
+do {
+  number = prompt("Please enter a number between 0 and 100: ");
+} while (!(number >= 0 && number < 100));
+
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+
+let arr = [];
+for (let i = 0; i < 100; i++) {
+  arr.push(i);
+}
+
+let arr = [];
+for (let i = 0; i < 100; i = i + 2) {
+  arr.push(i);
+}
+
+let arrOfArrays = [];
+for (let i = 0; i < 3; i++) {
+  arrOfArrays.push([]);
+  for (let j = 0; j < 7; j++) {
+    arrOfArrays[i].push(j);
+  }
+}
+
+console.log(arrOfArrays);
+
+let names = ["chantal", "john", "maxime", "bobbi", "jair"];
+for (let i = 0; i < names.length; i++) {
+  console.log(names[i]);
+}
+
+//let names = ["chantal", "john", "maxime", "bobbi", "jair"];
+for (let i = 0; i < names.length; i++) {
+  names[i] = "hello " + names[i];
+}
+console.log(names);
+
+for (let name of names) {
+  console.log(name);
+}
+
+let car = {
+  model: "Golf",
+  make: "Volkswagen",
+  year: 1999,
+  color: "black",
+};
+
+for (let prop in car) {
+  console.log(car[prop]);
+}
+
+for (let prop in car) {
+  console.log(prop);
+}
+
+let cars = [
+  {
+    model: "Golf",
+    make: "Volkswagen",
+    year: 1999,
+    color: "black",
+  },
+  {
+    model: "Picanto",
+    make: "Kia",
+    year: 2020,
+    color: "red",
+  },
+  {
+    model: "Peugeot",
+    make: "208",
+    year: 2021,
+    color: "black",
+  },
+  {
+    model: "Fiat",
+    make: "Punto",
+    year: 2020,
+    color: "black",
+  },
+];
+
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+  if (i === 4) {
+    break;
+  }
+}
+
+for (let i = 0; i < cars.length; i++) {
+  if (cars[i].year >= 2020) {
+    if (cars[i].color === "black") {
+      console.log("I have found my new car and can stop looking:", car[i]);
+      break;
+    }
+  }
+}
+
+let superLongArray = [];
+while (true) {
+  if (superLongArray[0] != 42 && superLongArray.length > 0) {
+    superLongArray.shift();
+  } else {
+    console.log("Found 42!");
+    break;
+  }
+}
+
+let notFound = true;
+while (superLongArray.length > 0 && notFound) {
+  if (superLongArray[0] != 42) {
+    superLongArray.shift();
+  } else {
+    console.log("Found 42!");
+    notFound = false;
+  }
+}
+
+for (let car of cars) {
+  if (car.color !== "black") {
+    continue;
+  }
+  if (car.year >= 2020) {
+    console.log("sure, let's get this one:", car);
+  }
+}
+// let's only log the odd numbers to the console
+let i = 1;
+while (i < 50) {
+  if (i % 2 === 0) {
+    continue;
+  }
+  console.log(i);
+  i++;
+}
+
+let i = 1;
+while (i < 50) {
+  i++;
+  if ((i - 1) % 2 === 0) {
+    continue;
+  }
+  console.log(i - 1);
+}
+
+for (let i = 1; i < 50; i = i + 2) {
+  console.log(i);
+}
+
+let groups = [
+  ["martin", "daniel", "keith"],
+  ["margot", "marina", "ali"],
+  ["helen", "jonah", "sambikos"],
+];
+
+//let's find a group with two names starting with an m
+for (let i = 0; i < groups.length; i++) {
+  let matches = 0;
+
+  for (let j = 0; j < groups[i].length; j++) {
+    if (groups[i][j].startsWith("m")) {
+      matches++;
+    } else {
+      continue;
+    }
+    if (matches === 2) {
+      console.log("Found a group with two names starting with an m:");
+      console.log(groups[i]);
+      break;
+    }
+  }
+}
+
+for (let group of groups) {
+  for (let member of group) {
+    if (member.startsWith("m")) {
+      console.log("found one starting with m:", member);
+      break;
+    }
+  }
+}
+
+outer: for (let group of groups) {
+  inner: for (let member of group) {
+    if (member.startsWith("m")) {
+      console.log("found one starting with m:", member);
+      break outer;
+    }
+  }
+}
diff --git a/chapter7/ch7-helloweb.html b/chapter7/ch7-helloweb.html
new file mode 100755
index 0000000..2fc353b
--- /dev/null
+++ b/chapter7/ch7-helloweb.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Tab in the browser</title>
+  </head>
+  <body>
+    <p>Hello web!</p>
+  </body>
+</html>
diff --git a/chapter7/ch7.html b/chapter7/ch7.html
new file mode 100755
index 0000000..75417e8
--- /dev/null
+++ b/chapter7/ch7.html
@@ -0,0 +1,21 @@
+<outer>
+  <sub>
+    <inner>
+    </inner>
+  </sub>
+</outer>
+
+<html>
+  <head>
+    <title>Tab in the browser</title>
+  </head>
+  <body>
+    <h1>DOM</h1>
+    <div>
+      <p>Hello web!</p>
+      <a href="https://google.com">Here's a link!</a>
+    </div>
+  </body>
+
+  
+</html>
diff --git a/chapter7/ch7classes.js b/chapter7/ch7classes.js
new file mode 100755
index 0000000..e1bdc64
--- /dev/null
+++ b/chapter7/ch7classes.js
@@ -0,0 +1,118 @@
+class Dog {
+  constructor(dogName, weight, color, breed) {
+    this.dogName = dogName;
+    this.weight = weight;
+    this.color = color;
+    this.breed = breed;
+  }
+}
+
+let dog = new Dog("JavaScript", 2.4, "brown", "chihuahua");
+console.log(dog.dogName, "is a", dog.breed, "and weighs", dog.weight, "kg.");
+
+class Person {
+  constructor(firstname, lastname) {
+    this.firstname = firstname;
+    this.lastname = lastname;
+  }
+}
+
+let p = new Person("Maaike", "van Putten");
+console.log("Hi", p.firstname);
+
+let p = new Person("Maaike");
+console.log("Hi", p.firstname, p.lastname);
+
+class Person {
+  constructor(firstname, lastname) {
+    this.firstname = firstname;
+    this.lastname = lastname;
+  }
+
+  greet() {
+    console.log("Hi there!");
+  }
+
+  compliment(name, object) {
+    return "That's a wonderful " + object + ", " + name;
+  }
+}
+
+p.greet();
+
+let compliment = p.compliment();
+console.log(compliment);
+
+class Vehicle {
+  constructor(color, currentSpeed, maxSpeed) {
+    this.color = color;
+    this.currentSpeed = currentSpeed;
+    this.maxSpeed = maxSpeed;
+  }
+
+  move() {
+    console.log("moving at", this.currentSpeed);
+  }
+
+  accelerate(amount) {
+    this.currentSpeed += amount;
+  }
+}
+
+class Motor extends Vehicle {
+  constructor(color, currentSpeed, maxSpeed, fuel) {
+    super(color, currentSpeed, maxSpeed);
+    this.fuel = fuel;
+  }
+}
+let motor = new Motor("Black", 0, 250, "gasoline");
+console.log(motor.color);
+motor.accelerate(50);
+motor.move();
+
+class Person {
+  #firstname;
+  #lastname;
+  constructor(firstname, lastname) {
+    this.#firstname = firstname;
+    this.#lastname = lastname;
+  }
+
+  get firstname() {
+    return this.#firstname;
+  }
+
+  set firstname(firstname) {
+    this.#firstname = firstname;
+  }
+
+  get lastname() {
+    return this.#lastname;
+  }
+
+  set lastname(lastname) {
+    this.#lastname = lastname;
+  }
+}
+
+let p = new Person("Maria", "Saga");
+console.log(p.firstname);
+
+class Person {
+  constructor(firstname, lastname) {
+    this.firstname = firstname;
+    this.lastname = lastname;
+  }
+
+  greet() {
+    console.log("Hi there!");
+  }
+}
+
+Person.prototype.introduce = function () {
+  console.log("Hi, I'm", this.firstname);
+};
+
+let p = new Person("Maria", "Saga");
+p.introduce();
+
diff --git a/chapter9/ch9-accessing.html b/chapter9/ch9-accessing.html
new file mode 100755
index 0000000..0310f1e
--- /dev/null
+++ b/chapter9/ch9-accessing.html
@@ -0,0 +1,8 @@
+<html>
+  <body>
+    <h1 style="color:pink;">Just an example</h1>
+    <div id="one" class="example">Hi!</div>
+    <div id="two" class="example">Hi!</div>
+    <div id="three" class="something">Hi!</div>
+  </body>
+</html>
diff --git a/chapter9/ch9-attributes.html b/chapter9/ch9-attributes.html
new file mode 100755
index 0000000..98a94fc
--- /dev/null
+++ b/chapter9/ch9-attributes.html
@@ -0,0 +1,26 @@
+<html>
+  <body>
+    <script>
+      function changeAttr(){
+        let el = document.getElementById("shape");
+        el.setAttribute("style", "background-color:red;border:1px solid black");
+        el.setAttribute("id", "new");
+        el.setAttribute("class", "circle");
+      
+      }
+    </script>
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        background-color: yellow;
+      }
+      .circle {
+        border-radius: 50%;
+      }
+    </style>
+    <div id="shape" class="square"></div>
+    
+    <button onclick="changeAttr()">Change attributes...</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-classes.html b/chapter9/ch9-classes.html
new file mode 100755
index 0000000..fda8be4
--- /dev/null
+++ b/chapter9/ch9-classes.html
@@ -0,0 +1,27 @@
+<html>
+  <body>
+    <script>
+      function disappear(){
+        document.getElementById("shape").classList.add("hide");
+      }
+    </script>
+    <style>
+      .hide {
+        display: none;
+      }
+
+      .square {
+        height: 100px;
+        width: 100px;
+        background-color: yellow;
+      }
+
+      .square.blue {
+        background-color: blue;
+      }
+    </style>
+    <div id="shape" class="square blue"></div>
+    
+    <button onclick="disappear()">Disappear!</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-classes2.html b/chapter9/ch9-classes2.html
new file mode 100755
index 0000000..8c60154
--- /dev/null
+++ b/chapter9/ch9-classes2.html
@@ -0,0 +1,23 @@
+<html>
+  <body>
+    <script>
+      function change(){
+        document.getElementById("shape").classList.remove("blue");
+      }
+    </script>
+    <style>
+      .square {
+        height: 100px;
+        width: 100px;
+        background-color: yellow;
+      }
+
+      .square.blue {
+        background-color: blue;
+      }
+    </style>
+    <div id="shape" class="square blue"></div>
+    
+    <button onclick="change()">Change!</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-classes3.html b/chapter9/ch9-classes3.html
new file mode 100755
index 0000000..dc9b15f
--- /dev/null
+++ b/chapter9/ch9-classes3.html
@@ -0,0 +1,23 @@
+<html>
+  <body>
+    <script>
+      function changeVisibility(){
+        document.getElementById("shape").classList.toggle("hide");
+      }
+    </script>
+    <style>
+      .hide {
+        display: none;
+      }
+
+      .square {
+        height: 100px;
+        width: 100px;
+        background-color: yellow;
+      }
+    </style>
+    <div id="shape" class="square"></div>
+    
+    <button onclick="changeVisibility()">Magic!</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-click.html b/chapter9/ch9-click.html
new file mode 100755
index 0000000..884e935
--- /dev/null
+++ b/chapter9/ch9-click.html
@@ -0,0 +1,23 @@
+<!-- <html>
+  <body>
+    <div id="one" onclick="alert('Auch! Stop it!')">Don't click here!</div>
+  </body>
+</html>
+
+
+<html>
+  <body>
+    <script>
+      function stop(){
+        alert("Auch! Stop it!");
+      }
+    </script>
+    <div id="one" onclick="stop()">Don't click here!</div>
+  </body>
+</html> -->
+
+<html>
+  <body>
+    <div id="one">Don't click here!</div>
+  </body>
+</html>
diff --git a/chapter9/ch9-colors.html b/chapter9/ch9-colors.html
new file mode 100755
index 0000000..71bd8e4
--- /dev/null
+++ b/chapter9/ch9-colors.html
@@ -0,0 +1,27 @@
+<html>
+  <body>
+    <script>
+      function rainbowify(){
+        let divs = document.getElementsByTagName("div");
+        for(let i = 0; i < divs.length; i++) {
+          divs[i].style.backgroundColor = divs[i].id;
+        }
+      }
+    </script>
+    <style>
+      div {
+        height: 30px;
+        width: 30px;
+        background-color: white;
+      }
+    </style>
+    <div id="red"></div>
+    <div id="orange"></div>
+    <div id="yellow"></div>
+    <div id="green"></div>
+    <div id="blue"></div>
+    <div id="indigo"></div>
+    <div id="violet"></div>
+    <button onclick="rainbowify()">Make me a rainbow</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-domflow.html b/chapter9/ch9-domflow.html
new file mode 100755
index 0000000..152eaba
--- /dev/null
+++ b/chapter9/ch9-domflow.html
@@ -0,0 +1,33 @@
+<html>
+  <body>
+    <style>
+      div {
+        border: 1px solid black;
+        margin-left: 5px;
+      }
+    </style>
+    <div id="message">Bubbling events</div>
+    <div id="output">
+      1
+      <div>
+        2
+        <div>
+          3
+          <div>
+            4
+            <div>5</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      function bup() {
+        console.log(this.innerText);
+      }
+      let divs = document.getElementsByTagName("div");
+      for (let i = 0; i < divs.length; i++) {
+        divs[i].addEventListener("click", bup, true);
+      }
+    </script>
+  </body>
+</html>
diff --git a/chapter9/ch9-event-listener.html b/chapter9/ch9-event-listener.html
new file mode 100755
index 0000000..a92835b
--- /dev/null
+++ b/chapter9/ch9-event-listener.html
@@ -0,0 +1,16 @@
+<html>
+  <body>
+    <script>
+      window.onload = function() {
+        document.getElementById("square").addEventListener("click", changeColor);
+      }
+      function changeColor(){
+        let red = Math.floor(Math.random() * 256);
+        let green = Math.floor(Math.random() * 256);
+        let blue = Math.floor(Math.random() * 256);
+        this.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
+      }
+    </script>
+    <div id="square" style="width:100px;height:100px;background-color:grey;">Click for magic</div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-new-element.html b/chapter9/ch9-new-element.html
new file mode 100755
index 0000000..1563be8
--- /dev/null
+++ b/chapter9/ch9-new-element.html
@@ -0,0 +1,12 @@
+<html>
+  <body>
+    <script>
+      function addRandomNumber(){
+        let el = document.createElement("p");
+        el.innerText = Math.floor(Math.random() * 100);
+        document.body.appendChild(el);
+      }
+    </script>
+    <button onclick="addRandomNumber()">Add a number</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-selectionelements.html b/chapter9/ch9-selectionelements.html
new file mode 100755
index 0000000..9ea0f82
--- /dev/null
+++ b/chapter9/ch9-selectionelements.html
@@ -0,0 +1,8 @@
+<html>
+  <body>
+    <h1>Welcome page</h1>
+    <p id="greeting">
+      Hi!
+    </p>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-this.html b/chapter9/ch9-this.html
new file mode 100755
index 0000000..dd981f7
--- /dev/null
+++ b/chapter9/ch9-this.html
@@ -0,0 +1,10 @@
+<html>
+  <body>
+    <script>
+      function reveal(el){
+        console.log(el.parentElement);
+      }
+    </script>
+    <button onclick="reveal(this)">Click here!</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-toggle-visibility.html b/chapter9/ch9-toggle-visibility.html
new file mode 100755
index 0000000..c5e9e83
--- /dev/null
+++ b/chapter9/ch9-toggle-visibility.html
@@ -0,0 +1,16 @@
+<html>
+  <body>
+    <script>
+      function toggleDisplay(){
+        let p = document.getElementById("magic");
+        if(p.style.display === "none") {
+          p.style.display = "block";
+        } else {
+          p.style.display = "none";
+        }
+      }
+    </script>
+    <p id="magic">I might disappear and appear.</p>
+    <button onclick="toggleDisplay()">Magic!</button>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9-treasure.html b/chapter9/ch9-treasure.html
new file mode 100755
index 0000000..0e62cf1
--- /dev/null
+++ b/chapter9/ch9-treasure.html
@@ -0,0 +1,19 @@
+<html>
+  <body>
+    <h1>Let's find the treasure</h1>
+    <div id="forest">
+      <div id="tree1">
+        <div id="squirrel"></div>
+        <div id="flower"></div>
+      </div>
+      <div id="tree2">
+        <div id="shrubbery">
+          <div id="treasure"></div>
+        </div>
+        <div id="mushroom">
+          <div id="bug"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/chapter9/ch9.js b/chapter9/ch9.js
new file mode 100755
index 0000000..e69de29

From c5760d0af3f16188f1e3af3c5bdd1596012360b1 Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Sun, 3 Oct 2021 19:53:08 +0200
Subject: [PATCH 2/9] revision new files

---
 .DS_Store                         | Bin 6148 -> 6148 bytes
 Chapter 12/asyncawait.js          |  16 ++++++++
 Chapter 12/callbacks.js           |  63 ++++++++++++++++++++++++++++++
 Chapter 12/chainedpromises.js     |  26 ++++++++++++
 Chapter 12/complex.json           |  34 ++++++++++++++++
 Chapter 12/parsing.js             |  12 ++++++
 Chapter 12/promises.js            |  19 +++++++++
 Chapter 12/storage.html           |  16 ++++++++
 Chapter 14/exampled3.html         |  24 ++++++++++++
 Chapter 14/examplereact.html      |  20 ++++++++++
 Chapter 14/exampleunderscore.html |  15 +++++++
 11 files changed, 245 insertions(+)
 create mode 100644 Chapter 12/asyncawait.js
 create mode 100644 Chapter 12/callbacks.js
 create mode 100644 Chapter 12/chainedpromises.js
 create mode 100644 Chapter 12/complex.json
 create mode 100644 Chapter 12/parsing.js
 create mode 100644 Chapter 12/promises.js
 create mode 100644 Chapter 12/storage.html
 create mode 100644 Chapter 14/exampled3.html
 create mode 100644 Chapter 14/examplereact.html
 create mode 100644 Chapter 14/exampleunderscore.html

diff --git a/.DS_Store b/.DS_Store
index f80bcd61c37b6d531944fb3df5dfdc2edf3506df..090835d22b1e025c4dc3edfe4cc3954686e550a6 100644
GIT binary patch
delta 121
zcmZoMXfc@J&&azmU^g=(?`9qrHAXJOl;Y%^r2PCG#>x4t;#@|kTw`Re1Sbk_vN7vq
l8BT^|h75*8h608XhE#?k215n|xT4L6Sr;;HX6N|J4*+sRBbfjI

delta 40
wcmZoMXfc@J&&aVcU^g=($7UWDHO9%?Sf@-5VHez7#n#I>v0?FMc8<UN006%YCjbBd

diff --git a/Chapter 12/asyncawait.js b/Chapter 12/asyncawait.js
new file mode 100644
index 0000000..933e561
--- /dev/null
+++ b/Chapter 12/asyncawait.js	
@@ -0,0 +1,16 @@
+function saySomething(x) {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve('something' + x);
+        }, 2000);
+    });
+}
+
+async function talk(x) {
+    const words = await saySomething(x);
+    console.log(words);
+}
+
+talk(2);
+talk(4);
+talk(8);
\ No newline at end of file
diff --git a/Chapter 12/callbacks.js b/Chapter 12/callbacks.js
new file mode 100644
index 0000000..0a29e70
--- /dev/null
+++ b/Chapter 12/callbacks.js	
@@ -0,0 +1,63 @@
+function doSomething(callback) {  
+    callback();
+}
+
+function sayHi() {
+    console.log("Hi!");
+}
+
+doSomething(sayHi);
+
+
+function judge(grade) {
+    switch (true) {
+        case grade == "A":
+            console.log("You got an", grade, ": amazing!");
+            break;
+        case grade == "B":
+            console.log("You got a", grade, ": well done!");
+            break;
+        case grade == "C":
+            console.log("You got a", grade, ": alright.");
+            break;
+        case grade == "D":
+            console.log("You got a", grade, ": hmmm...");
+            break;
+        default:
+            console.log("An", grade, "! What?!");
+    }
+}
+
+function getGrade(score, callback) {
+    let grade;
+    switch (true) {
+        case score >= 90:
+            grade = "A";
+            break;
+        case score >= 80:
+            console.log(score);
+            grade = "B";
+            break;
+        case score >= 70:
+            grade = "C";
+            break;
+        case score >= 60:
+            grade = "D";
+            break;
+        default:
+            grade = "F";
+    }
+    judge(grade);
+}
+
+getGrade(85, judge);
+
+setInterval(500, encourage);
+
+function encourage() {
+    console.log("You're doing great, keep going!");
+}
+
+setInterval(function () {
+    console.log("You're doing great, keep going!");
+}, 500)
\ No newline at end of file
diff --git a/Chapter 12/chainedpromises.js b/Chapter 12/chainedpromises.js
new file mode 100644
index 0000000..5ec4137
--- /dev/null
+++ b/Chapter 12/chainedpromises.js	
@@ -0,0 +1,26 @@
+const promise = new Promise((fulfill, reject) => {
+    fulfill('success!');
+    //reject('oops...');
+})
+    .then(value => {
+        console.log(value);
+        return 'we';
+    })
+    .then(value => {
+        console.log(value);
+        return 'can';
+    })
+    .then(value => {
+        console.log(value);
+        return 'chain';
+    })
+    .then(value => {
+        console.log(value);
+        return 'promises';
+    })
+    .then(value => {
+        console.log(value);
+    })
+    .catch(value => {
+        console.log(value);
+    })
diff --git a/Chapter 12/complex.json b/Chapter 12/complex.json
new file mode 100644
index 0000000..bf76d1a
--- /dev/null
+++ b/Chapter 12/complex.json	
@@ -0,0 +1,34 @@
+{
+    "companies": [
+        {
+            "name": "JavaScript Code Dojo",
+            "addresses": [
+                {
+                    "street": "123 Main street",
+                    "zipcode": 12345,
+                    "city" : "Scott"
+                },
+                {
+                    "street": "123 Side street",
+                    "zipcode": 35401,
+                    "city" : "Tuscaloosa"
+                }
+            ]
+        },
+        {
+            "name": "Python Code Dojo",
+            "addresses": [
+                {
+                    "street": "123 Party street",
+                    "zipcode": 68863,
+                    "city" : "Nebraska"
+                },
+                {
+                    "street": "123 Monty street",
+                    "zipcode": 33306,
+                    "city" : "Florida"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/Chapter 12/parsing.js b/Chapter 12/parsing.js
new file mode 100644
index 0000000..fa7ba17
--- /dev/null
+++ b/Chapter 12/parsing.js	
@@ -0,0 +1,12 @@
+let str = "{\"name\": \"Maaike\", \"age\": 30}";
+let obj = JSON.parse(str);
+console.log(obj.name, "is", obj.age);
+
+let dog = {
+    "name": "wiesje",
+    "breed": "dachshund"
+};
+
+let strdog = JSON.stringify(dog);
+console.log(typeof strdog);
+console.log(strdog);
\ No newline at end of file
diff --git a/Chapter 12/promises.js b/Chapter 12/promises.js
new file mode 100644
index 0000000..d517693
--- /dev/null
+++ b/Chapter 12/promises.js	
@@ -0,0 +1,19 @@
+let promise = new Promise(function (resolve, reject) {
+    // do something that might take a while
+    // let's just set x instead for this example  
+    let x = 20;
+    if (x > 10) {
+        resolve(x); // on success
+    } else {
+        reject("Too low");  // on error
+    }
+});
+
+promise.then(
+    function (value) {
+        console.log("Success:", value)
+    },
+    function (error) {
+        console.log("Error:", error)
+    }
+);
\ No newline at end of file
diff --git a/Chapter 12/storage.html b/Chapter 12/storage.html
new file mode 100644
index 0000000..bbdb605
--- /dev/null
+++ b/Chapter 12/storage.html	
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+    <div id="whatname"></div>
+    <button onclick="whatName()">What name?</button>
+    <script>
+        window.localStorage.setItem("name", "That name!");
+        function whatName() {
+            window.localStorage.clear();
+            document.getElementById("whatname").innerText = window.localStorage.getItem("name");
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Chapter 14/exampled3.html b/Chapter 14/exampled3.html
new file mode 100644
index 0000000..4ca9b65
--- /dev/null
+++ b/Chapter 14/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/Chapter 14/examplereact.html b/Chapter 14/examplereact.html
new file mode 100644
index 0000000..0c98e73
--- /dev/null
+++ b/Chapter 14/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/Chapter 14/exampleunderscore.html b/Chapter 14/exampleunderscore.html
new file mode 100644
index 0000000..d5c5e65
--- /dev/null
+++ b/Chapter 14/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

From 63a3fc300ed69e4eee5ea2bf4ff2bf37103d1f0e Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Thu, 18 Nov 2021 21:28:41 +0100
Subject: [PATCH 3/9] concurrency event loop files

---
 Chapter 13/concurrency_chapter/eventloop-async.js | 7 +++++++
 Chapter 13/concurrency_chapter/eventloop-sync.js  | 6 ++++++
 2 files changed, 13 insertions(+)
 create mode 100644 Chapter 13/concurrency_chapter/eventloop-async.js
 create mode 100644 Chapter 13/concurrency_chapter/eventloop-sync.js

diff --git a/Chapter 13/concurrency_chapter/eventloop-async.js b/Chapter 13/concurrency_chapter/eventloop-async.js
new file mode 100644
index 0000000..19f97fe
--- /dev/null
+++ b/Chapter 13/concurrency_chapter/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/Chapter 13/concurrency_chapter/eventloop-sync.js b/Chapter 13/concurrency_chapter/eventloop-sync.js
new file mode 100644
index 0000000..f904d71
--- /dev/null
+++ b/Chapter 13/concurrency_chapter/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

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 4/9] 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
zcmeHKeN<Cr7=JJOf{Q8RTg<~0@eXS23y`gCfH)8hJ0hBuns?g;mSdZDcW&S@j~RZY
zPAc&$70m>zQ%4JpK*{_{`$Q{1vO*L|P4NTFuhx6-=75fWL>>E!_iXn*?|Yx;_rAa1
z^SpmN?k0CDsM9))`2b{R#{+)=02c%!EPz0Z{zoAk<~<GC!@Tw^XbZhQe$Wo_>+v@(
zWi$Q|kQuY#lg4@Q<^r&W2iR~$B9lsxGLMZw1W@5!mr5i^g$L2?2EebvgD8YCtX?*p
z0(a|UZG{wNRf@%CTLNyd=!gWprAX|=tzv0{L=04^PAjgTLr?-8QD8Kyv8%Q9n80XI
zW6vh#NOG(hM4@qf2}w*TnUtq5nWI-2uv87Iaw?rg)*^z!1<oRq*`{==F$P=-ZF*UZ
zK_}9Xugo2n>2-lKHRe5w!{JD9$P+ANfmo_gD8v$(SSAxe50S0dOyN$E*%kv4PyvH6
zj<D%Tqm?pR%mNw{*IDe88pBY57doAyNTbe&PBUdz>~sjj7dO}#z7SL(P<i~7=>{7;
z^=vYQn9EE&Gn0|o$%>OUBCps=sIgqaX0elcf<d5zydW7Qfm4J*BZKJ@N#ReS694TJ
zy+==g)=6a>G$|=5io|5OTx8HE6QV=|ks`vA3B8EO*GUs~gjAlGnBoKSg!F~U)IpRa
zS&}R{Ng+*?j!`6~NPGdz$G-k~7Q4QXrlOJg+<Mj+UzM0v*JSjF!c4rX_#!-#c^rGC
z<)5d@p!cQ8Y9~!h2^jQZ!bB7iW{OUdl&&2pmqD+jjFgG!Nm06q>YE~1drA{-E>L4m
zk%7p^?IsG-<eMxGf_w-UZ@5a_3;91VvG%IxK6eX#fHdS@8gQmew^M}{Qj>$@#yNyw
zf=b+L5!N`P^uJOQUP7Ooea`UUetV>ZZc3(3Eo7d>V$x*b=6SeE{P*RD9>sGyc#YwO
z7W=NfCl5?rKf;Hnf*;`qH1xnG{StUUt^v9Fr9i)&2dZm8u6`-dFXw^k8j!1B3iQkQ
z|EaE?hK(@8F3kbkF?S2d09-bQ%VBf594?Q?^+$tHG#~&C9Xw=EP()~CWJG9qc+~LN
z=%`^akB5f~o)pB4#^U1RhDM7dBB3N!7$>Ab5FU?*`lBHz8X}Aej}rEKxIY7Ye;@=x
z7BUj}@evjuaUTZJu*2mb%%FQxdcb}bo|oqzfCfT`>LB2UuvmU<7Kg)ztuL~G?swUI
zPVfk6IyYo8&Ko&5RJN#Wn}5vM-3P;R8#+hHb>u4nXm~{A(5Tqam@qCrF)4XWib9z&
zPMeuEK6}EHys6Wko&MbOde|2f6dGT$QTBNbXK~5mS4)>HUABD1>u<cdwtU_C4I8(=
zz2lvol~udm-Sg4M)qD4SQuFEOhYlY(dhCniCr+OF{)ZnMo0?Czo^3mKzWqYSZx^p!
zzj3px`_><~@6fyu!1B<7&xi8jLtcJtHjB-pc_DrdnmC`$86o8cr%&eLb3;bT7Ws#c
zE!(#HU_gvKw=+yfHlX375?f=h(bO1b|BTox|B9K9SP!q$U=Ry|$z$<BD!8-ry^9fR
znx=p2AY1U#z?$wbSKF$wZIiy+GBGo5)asa@l~w9v^<n24$H=Se8mbT1=FfDk8x^!*
zVblq`f>Nsnzwl&U@m0dM!wpJzrMAfLZ-{PoP&bBbaGl?H^Ni;Du)C27zi*=C0!nlA
zKtA&Iu{T^>9najjI#XNy)g`v{{p-KKYH|%u10^pjJ}8-b{=?+TeXEZPtE2HNe`0kF
zGu&WNSKz9wvCkzm)s@v|)pgB&YU?*EE>F66;lvL+f6F;|Wx1+gAzs-L5qz<1XoX3z
z%sSJRHpDWc`-pSqmCBG4N1w=D-eM~kEZo0nR^v5R`lc7Zt9vbXdwU#v_mY%BX@ZsA
zzc#);gm($u^JOs+TU`fgkB^9KJGCW;JgfNW{qm(J&)E)5*>OI1+S=~=j>5qG(SPzc
z-;KGOwRY7f_uKE4bY1%8WX+|VoM3Ii-og7j4+p3I-2UN$_0;L)1!w9nx7{n=m9^Nu
zT)$-gu*{l$Z<(_)qpPsRv&<3f&bpuWknN7fZI?6i;zqwaq4CPMc;~cj`l^ng?49Fg
zm&#W06~aSRSpAF(2MViHtcovN?+1SIDKSP?Q=V2iA{!uE?x9b#l-{0tOA`@V@!rJd
z+M{=d$7aoCJCd(w$d;_u#(#E;yCQyN$lj{6u0tIMPL(ahns01AF#U|{=?h&)=9TZg
mcDhB&M#F{Q$Gg&m+uzY<=}Ve6R-c?2J3qKV8<xp)H~$6FOoT`P

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 @@ <h1 style="color:pink;">Just an example</h1>
     <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>

From 6200f79c4ec31491cb4bff2d8c4ac490908a5f67 Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Wed, 24 Nov 2021 19:42:15 +0100
Subject: [PATCH 5/9] reorganize

---
 .DS_Store                                     | Bin 6148 -> 8196 bytes
 Chapter 13/bouncing ball                      |  46 --------
 Chapter 13/canvas image uploader              |  43 --------
 Chapter 13/canvas rectangle                   |  27 -----
 Chapter 13/canvas stickman                    |  54 ----------
 Chapter 13/canvas text                        |  32 ------
 .../ch13-browser-supporting-file-reader.html  |  13 ---
 Chapter 13/ch13-canvas-animation.html         |  42 --------
 Chapter 13/ch13-canvas-circle.html            |  21 ----
 Chapter 13/ch13-canvas-draw-mouse.html        |  63 -----------
 Chapter 13/ch13-canvas-drawing-canvas.html    |  31 ------
 Chapter 13/ch13-canvas-lines.html             |  23 ----
 Chapter 13/ch13-canvas-save-image.html        |  34 ------
 Chapter 13/ch13-canvas-saving-image.html      |  38 -------
 Chapter 13/ch13-canvas-text.html              |  21 ----
 Chapter 13/ch13-canvas.html                   |  20 ----
 Chapter 13/ch13-drawing-image.html            |  23 ----
 Chapter 13/ch13-geo-getlocation.html          |  15 ---
 Chapter 13/ch13-inspect-geo.html              |  11 --
 Chapter 13/ch13-localstorage.html             |  14 ---
 Chapter 13/ch13-media.html                    |  18 ----
 Chapter 13/ch13-reading-file.html             |  17 ---
 Chapter 13/ch13-upload-file.html              |  14 ---
 Chapter 13/ch13-upload-files.html             |  15 ---
 Chapter 13/ch13.js                            |   6 --
 .../concurrency_chapter/eventloop-async.js    |   7 --
 .../concurrency_chapter/eventloop-sync.js     |   6 --
 Chapter 13/countdown timer                    | 101 ------------------
 Chapter 13/draw on canvas                     |  91 ----------------
 Chapter 13/ex1 Image Thumbnails               |  37 -------
 Chapter 13/ex1 Image preview                  |  37 -------
 Chapter 13/matrix effect                      |  44 --------
 Chapter 13/task List                          |  77 -------------
 Chapter 14/ch14-ajax.html                     |  22 ----
 Chapter 14/ch14-example-json.json             |  13 ---
 Chapter 14/ch14-express.js                    |  10 --
 Chapter 14/ch14-jquery.html                   |  22 ----
 Chapter 14/ch14-node.js                       |  11 --
 Chapter 14/ch14-vue-component.html            |  18 ----
 Chapter 14/ch14-vue.html                      |  23 ----
 Chapter 14/exampled3.html                     |  24 -----
 Chapter 14/examplereact.html                  |  20 ----
 Chapter 14/exampleunderscore.html             |  15 ---
 chapter 13/task List                          |  79 --------------
 44 files changed, 1298 deletions(-)
 delete mode 100644 Chapter 13/bouncing ball
 delete mode 100644 Chapter 13/canvas image uploader
 delete mode 100644 Chapter 13/canvas rectangle
 delete mode 100644 Chapter 13/canvas stickman
 delete mode 100644 Chapter 13/canvas text
 delete mode 100755 Chapter 13/ch13-browser-supporting-file-reader.html
 delete mode 100755 Chapter 13/ch13-canvas-animation.html
 delete mode 100755 Chapter 13/ch13-canvas-circle.html
 delete mode 100755 Chapter 13/ch13-canvas-draw-mouse.html
 delete mode 100755 Chapter 13/ch13-canvas-drawing-canvas.html
 delete mode 100755 Chapter 13/ch13-canvas-lines.html
 delete mode 100755 Chapter 13/ch13-canvas-save-image.html
 delete mode 100755 Chapter 13/ch13-canvas-saving-image.html
 delete mode 100755 Chapter 13/ch13-canvas-text.html
 delete mode 100755 Chapter 13/ch13-canvas.html
 delete mode 100755 Chapter 13/ch13-drawing-image.html
 delete mode 100755 Chapter 13/ch13-geo-getlocation.html
 delete mode 100755 Chapter 13/ch13-inspect-geo.html
 delete mode 100755 Chapter 13/ch13-localstorage.html
 delete mode 100755 Chapter 13/ch13-media.html
 delete mode 100755 Chapter 13/ch13-reading-file.html
 delete mode 100755 Chapter 13/ch13-upload-file.html
 delete mode 100755 Chapter 13/ch13-upload-files.html
 delete mode 100755 Chapter 13/ch13.js
 delete mode 100644 Chapter 13/concurrency_chapter/eventloop-async.js
 delete mode 100644 Chapter 13/concurrency_chapter/eventloop-sync.js
 delete mode 100644 Chapter 13/countdown timer
 delete mode 100644 Chapter 13/draw on canvas
 delete mode 100644 Chapter 13/ex1 Image Thumbnails
 delete mode 100644 Chapter 13/ex1 Image preview
 delete mode 100644 Chapter 13/matrix effect
 delete mode 100644 Chapter 13/task List
 delete mode 100755 Chapter 14/ch14-ajax.html
 delete mode 100755 Chapter 14/ch14-example-json.json
 delete mode 100755 Chapter 14/ch14-express.js
 delete mode 100755 Chapter 14/ch14-jquery.html
 delete mode 100755 Chapter 14/ch14-node.js
 delete mode 100755 Chapter 14/ch14-vue-component.html
 delete mode 100755 Chapter 14/ch14-vue.html
 delete mode 100644 Chapter 14/exampled3.html
 delete mode 100644 Chapter 14/examplereact.html
 delete mode 100644 Chapter 14/exampleunderscore.html
 delete mode 100644 chapter 13/task List

diff --git a/.DS_Store b/.DS_Store
index 090835d22b1e025c4dc3edfe4cc3954686e550a6..812ae31d232b1fd6fedf11243342ab7a28ee24c2 100644
GIT binary patch
literal 8196
zcmeHM-EPw`82!8-mKHI3fy4wt$_;nZ)P}9=E|9uzm6!ww(Fra9ZAnwHN?kHF=_)9l
zde0N^BVK{$Ks*4?!WA6b(G)vb#}zQJEBkZpbNqAs)!CO35o-+m3ege~S;*X$E~Cgv
zyr1Vxnn_x2!ZPrQV(L(zY^v<^GHBCa6fg=H1&jhl0i(d*pa7oPJXvQv_hqjsjRHo2
z|55>dKiJ6J))PCCR$Lt@L<j&ohh~vbM;stHc4F&^ok%OF7*j?METOU_#9)$+ew)K#
z>xrF6E9t}}omet6OCl5|W(Us}aAI|7O=%P`3S<@Fv3r5qbU-d0rQ`Ro?e#(rz5EBY
ziM;YdB-C;l-Y_~!7+<`jUN?%%<!@|ec5eRCf@Kx0;+5iy)<HOI#cn)^8gBm?|Mtj@
z54@zl8-~5py6ZjZc7}VUYg=IuyWODE7v!$r0p$79Zs3Q*MmPxkNQ~2x9hOzF3VWrc
z(a6~-FWYO*`gqwMZ8)f}-l>kq1?&3l%H5s)!&k3IZ^kF@#Ab*kcM4sV-%rc;`CIj)
zcF)6NIW0%K<5oZDg~3boazv4~banark+i<-J8)@zb2;g0^8k)I=nP-Ld4oFXL9=_Q
zszcIeZOB4qZ#9*{Ze<v{uWe|Ix92b_RMr@ngDp<+PB7Bjv^00ubQ4Sdlo~FBPr3Tn
zKke!_Mx#o#2LE=PD);qDd9Ai=*PPXivwwiDNM}0xM|5Vks`;{|o%bE>B>34)lWtYR
zbHAU4UsLhIrKjQ7RXo496wlE2r}-ZD@9B6=j}lyIKoRcEkPb0hj8C7s<e`<n3yswE
zFzBO<zex9Jmmbi4vT^^m@d?5AF@j5h#)Vc2cLA&&oJW%$Qj3}@nk%KC3-lPsP1?q6
zO<KWfeU%}!I!U?xJRM^-;*G9`<SM0+I7E{!paQdU%}YG~Z=U`B{{rsJEZHbv6!=vI
z*xYt&y8$%+b2TsVSldS4N9Kv+CejKD3K5ROif|nE^dE+(+kkRTJ+TvM(Sr2bUj(Eh
U9rOHGVm#%kZl3?bKmXO@C!|aOn*aa+

delta 254
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50D9Q_x2aA<3q%ssSC@>f%m2WIu
z&dkU=*-k)lvX}7r$&LcTlj8(cCT|l|oXjo6Gx?C92%|BOr@&|eBKb{n(hY-?^K%P;
zW&y$EkAjk-Cb{`8E=f80Nk9RP$@(t){uLf}oV;I993+#1RfgZBAOppmTSBIj?S+3$
uESbERor6P=8EiU(05_0!1$kj(;dkcA{4$;(4>2%7JO}bG!{&INIm`eV$U9;H

diff --git a/Chapter 13/bouncing ball b/Chapter 13/bouncing ball
deleted file mode 100644
index 546f857..0000000
--- a/Chapter 13/bouncing ball	
+++ /dev/null
@@ -1,46 +0,0 @@
-<!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/Chapter 13/canvas image uploader b/Chapter 13/canvas image uploader
deleted file mode 100644
index 0d1c08c..0000000
--- a/Chapter 13/canvas image uploader	
+++ /dev/null
@@ -1,43 +0,0 @@
-<!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/Chapter 13/canvas rectangle b/Chapter 13/canvas rectangle
deleted file mode 100644
index 4f5e1cd..0000000
--- a/Chapter 13/canvas rectangle	
+++ /dev/null
@@ -1,27 +0,0 @@
-<!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/Chapter 13/canvas stickman b/Chapter 13/canvas stickman
deleted file mode 100644
index 159bd3e..0000000
--- a/Chapter 13/canvas stickman	
+++ /dev/null
@@ -1,54 +0,0 @@
-<!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/Chapter 13/canvas text b/Chapter 13/canvas text
deleted file mode 100644
index 442965a..0000000
--- a/Chapter 13/canvas text	
+++ /dev/null
@@ -1,32 +0,0 @@
-<!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/Chapter 13/ch13-browser-supporting-file-reader.html b/Chapter 13/ch13-browser-supporting-file-reader.html
deleted file mode 100755
index b7c63a0..0000000
--- a/Chapter 13/ch13-browser-supporting-file-reader.html	
+++ /dev/null
@@ -1,13 +0,0 @@
-<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/Chapter 13/ch13-canvas-animation.html b/Chapter 13/ch13-canvas-animation.html
deleted file mode 100755
index d40f0eb..0000000
--- a/Chapter 13/ch13-canvas-animation.html	
+++ /dev/null
@@ -1,42 +0,0 @@
-<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/Chapter 13/ch13-canvas-circle.html b/Chapter 13/ch13-canvas-circle.html
deleted file mode 100755
index 64ce4d7..0000000
--- a/Chapter 13/ch13-canvas-circle.html	
+++ /dev/null
@@ -1,21 +0,0 @@
-<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/Chapter 13/ch13-canvas-draw-mouse.html b/Chapter 13/ch13-canvas-draw-mouse.html
deleted file mode 100755
index 7a622cb..0000000
--- a/Chapter 13/ch13-canvas-draw-mouse.html	
+++ /dev/null
@@ -1,63 +0,0 @@
-<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/Chapter 13/ch13-canvas-drawing-canvas.html b/Chapter 13/ch13-canvas-drawing-canvas.html
deleted file mode 100755
index 81a1b5d..0000000
--- a/Chapter 13/ch13-canvas-drawing-canvas.html	
+++ /dev/null
@@ -1,31 +0,0 @@
-<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/Chapter 13/ch13-canvas-lines.html b/Chapter 13/ch13-canvas-lines.html
deleted file mode 100755
index cee95f5..0000000
--- a/Chapter 13/ch13-canvas-lines.html	
+++ /dev/null
@@ -1,23 +0,0 @@
-<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/Chapter 13/ch13-canvas-save-image.html b/Chapter 13/ch13-canvas-save-image.html
deleted file mode 100755
index 27d7f2a..0000000
--- a/Chapter 13/ch13-canvas-save-image.html	
+++ /dev/null
@@ -1,34 +0,0 @@
-<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/Chapter 13/ch13-canvas-saving-image.html b/Chapter 13/ch13-canvas-saving-image.html
deleted file mode 100755
index 1aad4c2..0000000
--- a/Chapter 13/ch13-canvas-saving-image.html	
+++ /dev/null
@@ -1,38 +0,0 @@
-<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/Chapter 13/ch13-canvas-text.html b/Chapter 13/ch13-canvas-text.html
deleted file mode 100755
index 75a9952..0000000
--- a/Chapter 13/ch13-canvas-text.html	
+++ /dev/null
@@ -1,21 +0,0 @@
-<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/Chapter 13/ch13-canvas.html b/Chapter 13/ch13-canvas.html
deleted file mode 100755
index 68cca19..0000000
--- a/Chapter 13/ch13-canvas.html	
+++ /dev/null
@@ -1,20 +0,0 @@
-<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/Chapter 13/ch13-drawing-image.html b/Chapter 13/ch13-drawing-image.html
deleted file mode 100755
index 0c49e2f..0000000
--- a/Chapter 13/ch13-drawing-image.html	
+++ /dev/null
@@ -1,23 +0,0 @@
-<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/Chapter 13/ch13-geo-getlocation.html b/Chapter 13/ch13-geo-getlocation.html
deleted file mode 100755
index d1f221c..0000000
--- a/Chapter 13/ch13-geo-getlocation.html	
+++ /dev/null
@@ -1,15 +0,0 @@
-<html>
-  <body>
-    <script>
-      window.onload = init;
-
-      function init() {
-        navigator.geolocation.getCurrentPosition(showGeoPosition);
-      }
-
-      function showGeoPosition(data) {
-        console.dir(data);
-      }
-    </script>
-  </body>
-</html>
diff --git a/Chapter 13/ch13-inspect-geo.html b/Chapter 13/ch13-inspect-geo.html
deleted file mode 100755
index 27e4c8d..0000000
--- a/Chapter 13/ch13-inspect-geo.html	
+++ /dev/null
@@ -1,11 +0,0 @@
-<html>
-  <body>
-    <script>
-      window.onload = init;
-
-      function init() {
-        console.dir(navigator.geolocation);
-      }
-    </script>
-  </body>
-</html>
diff --git a/Chapter 13/ch13-localstorage.html b/Chapter 13/ch13-localstorage.html
deleted file mode 100755
index e760139..0000000
--- a/Chapter 13/ch13-localstorage.html	
+++ /dev/null
@@ -1,14 +0,0 @@
-<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/Chapter 13/ch13-media.html b/Chapter 13/ch13-media.html
deleted file mode 100755
index b1215d8..0000000
--- a/Chapter 13/ch13-media.html	
+++ /dev/null
@@ -1,18 +0,0 @@
-<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/Chapter 13/ch13-reading-file.html b/Chapter 13/ch13-reading-file.html
deleted file mode 100755
index 55aca2f..0000000
--- a/Chapter 13/ch13-reading-file.html	
+++ /dev/null
@@ -1,17 +0,0 @@
-<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/Chapter 13/ch13-upload-file.html b/Chapter 13/ch13-upload-file.html
deleted file mode 100755
index 92ed0e3..0000000
--- a/Chapter 13/ch13-upload-file.html	
+++ /dev/null
@@ -1,14 +0,0 @@
-<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/Chapter 13/ch13-upload-files.html b/Chapter 13/ch13-upload-files.html
deleted file mode 100755
index 783477e..0000000
--- a/Chapter 13/ch13-upload-files.html	
+++ /dev/null
@@ -1,15 +0,0 @@
-<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/Chapter 13/ch13.js b/Chapter 13/ch13.js
deleted file mode 100755
index 7fa387a..0000000
--- a/Chapter 13/ch13.js	
+++ /dev/null
@@ -1,6 +0,0 @@
-let varContainingFunction = function () {
-  let varInFunction = "I'm in a function.";
-  console.log("hi there!");
-};
-
-varContainingFunction();
diff --git a/Chapter 13/concurrency_chapter/eventloop-async.js b/Chapter 13/concurrency_chapter/eventloop-async.js
deleted file mode 100644
index 19f97fe..0000000
--- a/Chapter 13/concurrency_chapter/eventloop-async.js	
+++ /dev/null
@@ -1,7 +0,0 @@
-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/Chapter 13/concurrency_chapter/eventloop-sync.js b/Chapter 13/concurrency_chapter/eventloop-sync.js
deleted file mode 100644
index f904d71..0000000
--- a/Chapter 13/concurrency_chapter/eventloop-sync.js	
+++ /dev/null
@@ -1,6 +0,0 @@
-console.log("Hi there");
-add(4,5);
-
-function add(x, y) {
-    return x + y;
-}
\ No newline at end of file
diff --git a/Chapter 13/countdown timer b/Chapter 13/countdown timer
deleted file mode 100644
index 25556ed..0000000
--- a/Chapter 13/countdown timer	
+++ /dev/null
@@ -1,101 +0,0 @@
-<!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/Chapter 13/draw on canvas b/Chapter 13/draw on canvas
deleted file mode 100644
index 8bcf0c1..0000000
--- a/Chapter 13/draw on canvas	
+++ /dev/null
@@ -1,91 +0,0 @@
-<!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/Chapter 13/ex1 Image Thumbnails b/Chapter 13/ex1 Image Thumbnails
deleted file mode 100644
index 4808498..0000000
--- a/Chapter 13/ex1 Image Thumbnails	
+++ /dev/null
@@ -1,37 +0,0 @@
-<!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/Chapter 13/ex1 Image preview b/Chapter 13/ex1 Image preview
deleted file mode 100644
index 4808498..0000000
--- a/Chapter 13/ex1 Image preview	
+++ /dev/null
@@ -1,37 +0,0 @@
-<!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/Chapter 13/matrix effect b/Chapter 13/matrix effect
deleted file mode 100644
index 786e146..0000000
--- a/Chapter 13/matrix effect	
+++ /dev/null
@@ -1,44 +0,0 @@
-<!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/Chapter 13/task List b/Chapter 13/task List
deleted file mode 100644
index f883c98..0000000
--- a/Chapter 13/task List	
+++ /dev/null
@@ -1,77 +0,0 @@
-<!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();
-            }
-        }
-    </script>
-</body>
-</html>
diff --git a/Chapter 14/ch14-ajax.html b/Chapter 14/ch14-ajax.html
deleted file mode 100755
index ef90287..0000000
--- a/Chapter 14/ch14-ajax.html	
+++ /dev/null
@@ -1,22 +0,0 @@
-<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/Chapter 14/ch14-example-json.json b/Chapter 14/ch14-example-json.json
deleted file mode 100755
index c7928fc..0000000
--- a/Chapter 14/ch14-example-json.json	
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "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/Chapter 14/ch14-express.js b/Chapter 14/ch14-express.js
deleted file mode 100755
index e13267f..0000000
--- a/Chapter 14/ch14-express.js	
+++ /dev/null
@@ -1,10 +0,0 @@
-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/Chapter 14/ch14-jquery.html b/Chapter 14/ch14-jquery.html
deleted file mode 100755
index da80efc..0000000
--- a/Chapter 14/ch14-jquery.html	
+++ /dev/null
@@ -1,22 +0,0 @@
-<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/Chapter 14/ch14-node.js b/Chapter 14/ch14-node.js
deleted file mode 100755
index 1f09738..0000000
--- a/Chapter 14/ch14-node.js	
+++ /dev/null
@@ -1,11 +0,0 @@
-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/Chapter 14/ch14-vue-component.html b/Chapter 14/ch14-vue-component.html
deleted file mode 100755
index b126e3b..0000000
--- a/Chapter 14/ch14-vue-component.html	
+++ /dev/null
@@ -1,18 +0,0 @@
-<!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/Chapter 14/ch14-vue.html b/Chapter 14/ch14-vue.html
deleted file mode 100755
index e2ce949..0000000
--- a/Chapter 14/ch14-vue.html	
+++ /dev/null
@@ -1,23 +0,0 @@
-<!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/Chapter 14/exampled3.html b/Chapter 14/exampled3.html
deleted file mode 100644
index 4ca9b65..0000000
--- a/Chapter 14/exampled3.html	
+++ /dev/null
@@ -1,24 +0,0 @@
-<!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/Chapter 14/examplereact.html b/Chapter 14/examplereact.html
deleted file mode 100644
index 0c98e73..0000000
--- a/Chapter 14/examplereact.html	
+++ /dev/null
@@ -1,20 +0,0 @@
-<!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/Chapter 14/exampleunderscore.html b/Chapter 14/exampleunderscore.html
deleted file mode 100644
index d5c5e65..0000000
--- a/Chapter 14/exampleunderscore.html	
+++ /dev/null
@@ -1,15 +0,0 @@
-<!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/chapter 13/task List b/chapter 13/task List
deleted file mode 100644
index 91d44dc..0000000
--- a/chapter 13/task List	
+++ /dev/null
@@ -1,79 +0,0 @@
-<!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>

From f8bde27fc6d1e7c92aa927e50367cf5ff4934f39 Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Thu, 25 Nov 2021 14:40:42 +0100
Subject: [PATCH 6/9] updated folder structure

---
 .DS_Store                                     | Bin 10244 -> 10244 bytes
 .../{ => Code Samples}/ch10-animate.html      |   0
 .../{ => Code Samples}/ch10-dragdrop.html     |   0
 .../{ => Code Samples}/ch10-eventtarget.html  |   0
 .../{ => Code Samples}/ch10-formcontent.html  |   0
 .../{ => Code Samples}/ch10-formsubmit.html   |   0
 .../ch10-formsubmitreturn.html                |   0
 .../{ => Code Samples}/ch10-keyevent.html     |   0
 .../ch10-keyeventreturn.html                  |   0
 .../{ => Code Samples}/ch10-mouseevents.html  |   0
 .../{ => Code Samples}/ch10-mouseevents2.html |   0
 .../ch10-onchang-onblur.html                  |   0
 .../ch10-specifyingevents.html                |   0
 .../{ => Code Samples}/ch11-evileval.html     |   0
 Chapter 11/{ => Code Samples}/ch11.js         |   0
 Chapter 12/{ => Code Samples}/ch12.js         |   0
 .../ch12_asyncawait.js}                       |   0
 .../ch12_callbacks.js}                        |   0
 .../ch12_chainedpromises.js}                  |   0
 .../ch12_complex.json}                        |   0
 .../ch12_cookie.html}                         |   0
 .../ch12_parsing.js}                          |   0
 .../ch12_promises.js}                         |   0
 .../ch12_storage.html}                        |   0
 .../ch13_eventloop-async.js                   |   0
 .../{ => Code Samples}/ch13_eventloop-sync.js |   0
 .../ch14-browser-supporting-file-reader.html  |   0
 .../ch14-canvas-animation.html                |   0
 .../ch14-canvas-circle.html                   |   0
 .../ch14-canvas-draw-mouse.html               |   0
 .../ch14-canvas-drawing-canvas.html           |   0
 .../{ => Code Samples}/ch14-canvas-lines.html |   0
 .../ch14-canvas-save-image.html               |   0
 .../ch14-canvas-saving-image.html             |   0
 .../{ => Code Samples}/ch14-canvas-text.html  |   0
 .../ch14-canvas-upload-image.html             |   0
 .../{ => Code Samples}/ch14-canvas.html       |   0
 .../ch14-drawing-image.html                   |   0
 .../ch14-geo-getlocation.html                 |   0
 .../{ => Code Samples}/ch14-inspect-geo.html  |   0
 .../{ => Code Samples}/ch14-localstorage.html |   0
 Chapter 14/{ => Code Samples}/ch14-media.html |   0
 .../{ => Code Samples}/ch14-reading-file.html |   0
 .../{ => Code Samples}/ch14-upload-file.html  |   0
 .../{ => Code Samples}/ch14-upload-files.html |   0
 Chapter 14/{ => Code Samples}/ch14.js         |   0
 Chapter 15/{ => Code Samples}/ch15-ajax.html  |   0
 .../{ => Code Samples}/ch15-example-json.json |   0
 Chapter 15/{ => Code Samples}/ch15-express.js |   0
 .../{ => Code Samples}/ch15-jquery.html       |   0
 Chapter 15/{ => Code Samples}/ch15-node.js    |   0
 .../ch15-vue-component.html                   |   0
 Chapter 15/{ => Code Samples}/ch15-vue.html   |   0
 .../{ => Code Samples}/ch15_exampled3.html    |   0
 .../{ => Code Samples}/ch15_examplereact.html |   0
 .../ch15_exampleunderscore.html               |   0
 .../{ch2.js => Code Samples/ch2_snippets.js}  |   0
 .../{ch3.js => Code Samples/ch3_snippets.js}  |   0
 .../{ch4.js => Code Samples/ch4_snippets.js}  |   0
 .../{ch5.js => Code Samples/ch5_snippets.js}  |   0
 .../{ch6.js => Code Samples/ch6_snippets.js}  |   0
 .../ch7_classes.js}                           |   0
 .../ch7_helloweb.html}                        |   0
 .../{ch7.html => Code Samples/ch7_html.html}  |   0
 .../{ => Code Samples}/ch9-accessing.html     |   0
 .../{ => Code Samples}/ch9-attributes.html    |   0
 Chapter 9/{ => Code Samples}/ch9-classes.html |   0
 .../{ => Code Samples}/ch9-classes2.html      |   0
 .../{ => Code Samples}/ch9-classes3.html      |   0
 Chapter 9/{ => Code Samples}/ch9-click.html   |   0
 Chapter 9/{ => Code Samples}/ch9-colors.html  |   0
 Chapter 9/{ => Code Samples}/ch9-domflow.html |   0
 .../ch9-event-listener.html                   |   0
 .../{ => Code Samples}/ch9-new-element.html   |   0
 .../ch9-selectionelements.html                |   0
 Chapter 9/{ => Code Samples}/ch9-this.html    |   0
 .../ch9-toggle-visibility.html                |   0
 .../{ => Code Samples}/ch9-treasure.html      |   0
 78 files changed, 0 insertions(+), 0 deletions(-)
 rename Chapter 10/{ => Code Samples}/ch10-animate.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-dragdrop.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-eventtarget.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-formcontent.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-formsubmit.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-formsubmitreturn.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-keyevent.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-keyeventreturn.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-mouseevents.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-mouseevents2.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-onchang-onblur.html (100%)
 rename Chapter 10/{ => Code Samples}/ch10-specifyingevents.html (100%)
 rename Chapter 11/{ => Code Samples}/ch11-evileval.html (100%)
 rename Chapter 11/{ => Code Samples}/ch11.js (100%)
 rename Chapter 12/{ => Code Samples}/ch12.js (100%)
 rename Chapter 12/{asyncawait.js => Code Samples/ch12_asyncawait.js} (100%)
 rename Chapter 12/{callbacks.js => Code Samples/ch12_callbacks.js} (100%)
 rename Chapter 12/{chainedpromises.js => Code Samples/ch12_chainedpromises.js} (100%)
 rename Chapter 12/{complex.json => Code Samples/ch12_complex.json} (100%)
 rename Chapter 12/{ch12-cookie.html => Code Samples/ch12_cookie.html} (100%)
 rename Chapter 12/{parsing.js => Code Samples/ch12_parsing.js} (100%)
 rename Chapter 12/{promises.js => Code Samples/ch12_promises.js} (100%)
 rename Chapter 12/{storage.html => Code Samples/ch12_storage.html} (100%)
 rename Chapter 13/{ => Code Samples}/ch13_eventloop-async.js (100%)
 rename Chapter 13/{ => Code Samples}/ch13_eventloop-sync.js (100%)
 rename Chapter 14/{ => Code Samples}/ch14-browser-supporting-file-reader.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-animation.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-circle.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-draw-mouse.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-drawing-canvas.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-lines.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-save-image.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-saving-image.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-text.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas-upload-image.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-canvas.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-drawing-image.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-geo-getlocation.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-inspect-geo.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-localstorage.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-media.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-reading-file.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-upload-file.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14-upload-files.html (100%)
 rename Chapter 14/{ => Code Samples}/ch14.js (100%)
 rename Chapter 15/{ => Code Samples}/ch15-ajax.html (100%)
 rename Chapter 15/{ => Code Samples}/ch15-example-json.json (100%)
 rename Chapter 15/{ => Code Samples}/ch15-express.js (100%)
 rename Chapter 15/{ => Code Samples}/ch15-jquery.html (100%)
 rename Chapter 15/{ => Code Samples}/ch15-node.js (100%)
 rename Chapter 15/{ => Code Samples}/ch15-vue-component.html (100%)
 rename Chapter 15/{ => Code Samples}/ch15-vue.html (100%)
 rename Chapter 15/{ => Code Samples}/ch15_exampled3.html (100%)
 rename Chapter 15/{ => Code Samples}/ch15_examplereact.html (100%)
 rename Chapter 15/{ => Code Samples}/ch15_exampleunderscore.html (100%)
 rename Chapter 2/{ch2.js => Code Samples/ch2_snippets.js} (100%)
 rename Chapter 3/{ch3.js => Code Samples/ch3_snippets.js} (100%)
 rename Chapter 4/{ch4.js => Code Samples/ch4_snippets.js} (100%)
 rename Chapter 5/{ch5.js => Code Samples/ch5_snippets.js} (100%)
 rename Chapter 6/{ch6.js => Code Samples/ch6_snippets.js} (100%)
 rename Chapter 7/{ch7classes.js => Code Samples/ch7_classes.js} (100%)
 rename Chapter 7/{ch7-helloweb.html => Code Samples/ch7_helloweb.html} (100%)
 rename Chapter 7/{ch7.html => Code Samples/ch7_html.html} (100%)
 rename Chapter 9/{ => Code Samples}/ch9-accessing.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-attributes.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-classes.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-classes2.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-classes3.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-click.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-colors.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-domflow.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-event-listener.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-new-element.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-selectionelements.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-this.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-toggle-visibility.html (100%)
 rename Chapter 9/{ => Code Samples}/ch9-treasure.html (100%)

diff --git a/.DS_Store b/.DS_Store
index 367dabfa4689e64efc7b58003e08454744f5f22b..59c9483fbb497e6a20ef434fdc2dcdcfbb81e237 100644
GIT binary patch
delta 32
hcmZn(XbIRLEHpV;SYooa5GR=S0n?J3^Ms~}0sy5;36lT-

delta 38
icmZn(XbIRLEX2q-dB33eWNjf%D9Z=N+MFviT@(P*q6(t`

diff --git a/Chapter 10/ch10-animate.html b/Chapter 10/Code Samples/ch10-animate.html
similarity index 100%
rename from Chapter 10/ch10-animate.html
rename to Chapter 10/Code Samples/ch10-animate.html
diff --git a/Chapter 10/ch10-dragdrop.html b/Chapter 10/Code Samples/ch10-dragdrop.html
similarity index 100%
rename from Chapter 10/ch10-dragdrop.html
rename to Chapter 10/Code Samples/ch10-dragdrop.html
diff --git a/Chapter 10/ch10-eventtarget.html b/Chapter 10/Code Samples/ch10-eventtarget.html
similarity index 100%
rename from Chapter 10/ch10-eventtarget.html
rename to Chapter 10/Code Samples/ch10-eventtarget.html
diff --git a/Chapter 10/ch10-formcontent.html b/Chapter 10/Code Samples/ch10-formcontent.html
similarity index 100%
rename from Chapter 10/ch10-formcontent.html
rename to Chapter 10/Code Samples/ch10-formcontent.html
diff --git a/Chapter 10/ch10-formsubmit.html b/Chapter 10/Code Samples/ch10-formsubmit.html
similarity index 100%
rename from Chapter 10/ch10-formsubmit.html
rename to Chapter 10/Code Samples/ch10-formsubmit.html
diff --git a/Chapter 10/ch10-formsubmitreturn.html b/Chapter 10/Code Samples/ch10-formsubmitreturn.html
similarity index 100%
rename from Chapter 10/ch10-formsubmitreturn.html
rename to Chapter 10/Code Samples/ch10-formsubmitreturn.html
diff --git a/Chapter 10/ch10-keyevent.html b/Chapter 10/Code Samples/ch10-keyevent.html
similarity index 100%
rename from Chapter 10/ch10-keyevent.html
rename to Chapter 10/Code Samples/ch10-keyevent.html
diff --git a/Chapter 10/ch10-keyeventreturn.html b/Chapter 10/Code Samples/ch10-keyeventreturn.html
similarity index 100%
rename from Chapter 10/ch10-keyeventreturn.html
rename to Chapter 10/Code Samples/ch10-keyeventreturn.html
diff --git a/Chapter 10/ch10-mouseevents.html b/Chapter 10/Code Samples/ch10-mouseevents.html
similarity index 100%
rename from Chapter 10/ch10-mouseevents.html
rename to Chapter 10/Code Samples/ch10-mouseevents.html
diff --git a/Chapter 10/ch10-mouseevents2.html b/Chapter 10/Code Samples/ch10-mouseevents2.html
similarity index 100%
rename from Chapter 10/ch10-mouseevents2.html
rename to Chapter 10/Code Samples/ch10-mouseevents2.html
diff --git a/Chapter 10/ch10-onchang-onblur.html b/Chapter 10/Code Samples/ch10-onchang-onblur.html
similarity index 100%
rename from Chapter 10/ch10-onchang-onblur.html
rename to Chapter 10/Code Samples/ch10-onchang-onblur.html
diff --git a/Chapter 10/ch10-specifyingevents.html b/Chapter 10/Code Samples/ch10-specifyingevents.html
similarity index 100%
rename from Chapter 10/ch10-specifyingevents.html
rename to Chapter 10/Code Samples/ch10-specifyingevents.html
diff --git a/Chapter 11/ch11-evileval.html b/Chapter 11/Code Samples/ch11-evileval.html
similarity index 100%
rename from Chapter 11/ch11-evileval.html
rename to Chapter 11/Code Samples/ch11-evileval.html
diff --git a/Chapter 11/ch11.js b/Chapter 11/Code Samples/ch11.js
similarity index 100%
rename from Chapter 11/ch11.js
rename to Chapter 11/Code Samples/ch11.js
diff --git a/Chapter 12/ch12.js b/Chapter 12/Code Samples/ch12.js
similarity index 100%
rename from Chapter 12/ch12.js
rename to Chapter 12/Code Samples/ch12.js
diff --git a/Chapter 12/asyncawait.js b/Chapter 12/Code Samples/ch12_asyncawait.js
similarity index 100%
rename from Chapter 12/asyncawait.js
rename to Chapter 12/Code Samples/ch12_asyncawait.js
diff --git a/Chapter 12/callbacks.js b/Chapter 12/Code Samples/ch12_callbacks.js
similarity index 100%
rename from Chapter 12/callbacks.js
rename to Chapter 12/Code Samples/ch12_callbacks.js
diff --git a/Chapter 12/chainedpromises.js b/Chapter 12/Code Samples/ch12_chainedpromises.js
similarity index 100%
rename from Chapter 12/chainedpromises.js
rename to Chapter 12/Code Samples/ch12_chainedpromises.js
diff --git a/Chapter 12/complex.json b/Chapter 12/Code Samples/ch12_complex.json
similarity index 100%
rename from Chapter 12/complex.json
rename to Chapter 12/Code Samples/ch12_complex.json
diff --git a/Chapter 12/ch12-cookie.html b/Chapter 12/Code Samples/ch12_cookie.html
similarity index 100%
rename from Chapter 12/ch12-cookie.html
rename to Chapter 12/Code Samples/ch12_cookie.html
diff --git a/Chapter 12/parsing.js b/Chapter 12/Code Samples/ch12_parsing.js
similarity index 100%
rename from Chapter 12/parsing.js
rename to Chapter 12/Code Samples/ch12_parsing.js
diff --git a/Chapter 12/promises.js b/Chapter 12/Code Samples/ch12_promises.js
similarity index 100%
rename from Chapter 12/promises.js
rename to Chapter 12/Code Samples/ch12_promises.js
diff --git a/Chapter 12/storage.html b/Chapter 12/Code Samples/ch12_storage.html
similarity index 100%
rename from Chapter 12/storage.html
rename to Chapter 12/Code Samples/ch12_storage.html
diff --git a/Chapter 13/ch13_eventloop-async.js b/Chapter 13/Code Samples/ch13_eventloop-async.js
similarity index 100%
rename from Chapter 13/ch13_eventloop-async.js
rename to Chapter 13/Code Samples/ch13_eventloop-async.js
diff --git a/Chapter 13/ch13_eventloop-sync.js b/Chapter 13/Code Samples/ch13_eventloop-sync.js
similarity index 100%
rename from Chapter 13/ch13_eventloop-sync.js
rename to Chapter 13/Code Samples/ch13_eventloop-sync.js
diff --git a/Chapter 14/ch14-browser-supporting-file-reader.html b/Chapter 14/Code Samples/ch14-browser-supporting-file-reader.html
similarity index 100%
rename from Chapter 14/ch14-browser-supporting-file-reader.html
rename to Chapter 14/Code Samples/ch14-browser-supporting-file-reader.html
diff --git a/Chapter 14/ch14-canvas-animation.html b/Chapter 14/Code Samples/ch14-canvas-animation.html
similarity index 100%
rename from Chapter 14/ch14-canvas-animation.html
rename to Chapter 14/Code Samples/ch14-canvas-animation.html
diff --git a/Chapter 14/ch14-canvas-circle.html b/Chapter 14/Code Samples/ch14-canvas-circle.html
similarity index 100%
rename from Chapter 14/ch14-canvas-circle.html
rename to Chapter 14/Code Samples/ch14-canvas-circle.html
diff --git a/Chapter 14/ch14-canvas-draw-mouse.html b/Chapter 14/Code Samples/ch14-canvas-draw-mouse.html
similarity index 100%
rename from Chapter 14/ch14-canvas-draw-mouse.html
rename to Chapter 14/Code Samples/ch14-canvas-draw-mouse.html
diff --git a/Chapter 14/ch14-canvas-drawing-canvas.html b/Chapter 14/Code Samples/ch14-canvas-drawing-canvas.html
similarity index 100%
rename from Chapter 14/ch14-canvas-drawing-canvas.html
rename to Chapter 14/Code Samples/ch14-canvas-drawing-canvas.html
diff --git a/Chapter 14/ch14-canvas-lines.html b/Chapter 14/Code Samples/ch14-canvas-lines.html
similarity index 100%
rename from Chapter 14/ch14-canvas-lines.html
rename to Chapter 14/Code Samples/ch14-canvas-lines.html
diff --git a/Chapter 14/ch14-canvas-save-image.html b/Chapter 14/Code Samples/ch14-canvas-save-image.html
similarity index 100%
rename from Chapter 14/ch14-canvas-save-image.html
rename to Chapter 14/Code Samples/ch14-canvas-save-image.html
diff --git a/Chapter 14/ch14-canvas-saving-image.html b/Chapter 14/Code Samples/ch14-canvas-saving-image.html
similarity index 100%
rename from Chapter 14/ch14-canvas-saving-image.html
rename to Chapter 14/Code Samples/ch14-canvas-saving-image.html
diff --git a/Chapter 14/ch14-canvas-text.html b/Chapter 14/Code Samples/ch14-canvas-text.html
similarity index 100%
rename from Chapter 14/ch14-canvas-text.html
rename to Chapter 14/Code Samples/ch14-canvas-text.html
diff --git a/Chapter 14/ch14-canvas-upload-image.html b/Chapter 14/Code Samples/ch14-canvas-upload-image.html
similarity index 100%
rename from Chapter 14/ch14-canvas-upload-image.html
rename to Chapter 14/Code Samples/ch14-canvas-upload-image.html
diff --git a/Chapter 14/ch14-canvas.html b/Chapter 14/Code Samples/ch14-canvas.html
similarity index 100%
rename from Chapter 14/ch14-canvas.html
rename to Chapter 14/Code Samples/ch14-canvas.html
diff --git a/Chapter 14/ch14-drawing-image.html b/Chapter 14/Code Samples/ch14-drawing-image.html
similarity index 100%
rename from Chapter 14/ch14-drawing-image.html
rename to Chapter 14/Code Samples/ch14-drawing-image.html
diff --git a/Chapter 14/ch14-geo-getlocation.html b/Chapter 14/Code Samples/ch14-geo-getlocation.html
similarity index 100%
rename from Chapter 14/ch14-geo-getlocation.html
rename to Chapter 14/Code Samples/ch14-geo-getlocation.html
diff --git a/Chapter 14/ch14-inspect-geo.html b/Chapter 14/Code Samples/ch14-inspect-geo.html
similarity index 100%
rename from Chapter 14/ch14-inspect-geo.html
rename to Chapter 14/Code Samples/ch14-inspect-geo.html
diff --git a/Chapter 14/ch14-localstorage.html b/Chapter 14/Code Samples/ch14-localstorage.html
similarity index 100%
rename from Chapter 14/ch14-localstorage.html
rename to Chapter 14/Code Samples/ch14-localstorage.html
diff --git a/Chapter 14/ch14-media.html b/Chapter 14/Code Samples/ch14-media.html
similarity index 100%
rename from Chapter 14/ch14-media.html
rename to Chapter 14/Code Samples/ch14-media.html
diff --git a/Chapter 14/ch14-reading-file.html b/Chapter 14/Code Samples/ch14-reading-file.html
similarity index 100%
rename from Chapter 14/ch14-reading-file.html
rename to Chapter 14/Code Samples/ch14-reading-file.html
diff --git a/Chapter 14/ch14-upload-file.html b/Chapter 14/Code Samples/ch14-upload-file.html
similarity index 100%
rename from Chapter 14/ch14-upload-file.html
rename to Chapter 14/Code Samples/ch14-upload-file.html
diff --git a/Chapter 14/ch14-upload-files.html b/Chapter 14/Code Samples/ch14-upload-files.html
similarity index 100%
rename from Chapter 14/ch14-upload-files.html
rename to Chapter 14/Code Samples/ch14-upload-files.html
diff --git a/Chapter 14/ch14.js b/Chapter 14/Code Samples/ch14.js
similarity index 100%
rename from Chapter 14/ch14.js
rename to Chapter 14/Code Samples/ch14.js
diff --git a/Chapter 15/ch15-ajax.html b/Chapter 15/Code Samples/ch15-ajax.html
similarity index 100%
rename from Chapter 15/ch15-ajax.html
rename to Chapter 15/Code Samples/ch15-ajax.html
diff --git a/Chapter 15/ch15-example-json.json b/Chapter 15/Code Samples/ch15-example-json.json
similarity index 100%
rename from Chapter 15/ch15-example-json.json
rename to Chapter 15/Code Samples/ch15-example-json.json
diff --git a/Chapter 15/ch15-express.js b/Chapter 15/Code Samples/ch15-express.js
similarity index 100%
rename from Chapter 15/ch15-express.js
rename to Chapter 15/Code Samples/ch15-express.js
diff --git a/Chapter 15/ch15-jquery.html b/Chapter 15/Code Samples/ch15-jquery.html
similarity index 100%
rename from Chapter 15/ch15-jquery.html
rename to Chapter 15/Code Samples/ch15-jquery.html
diff --git a/Chapter 15/ch15-node.js b/Chapter 15/Code Samples/ch15-node.js
similarity index 100%
rename from Chapter 15/ch15-node.js
rename to Chapter 15/Code Samples/ch15-node.js
diff --git a/Chapter 15/ch15-vue-component.html b/Chapter 15/Code Samples/ch15-vue-component.html
similarity index 100%
rename from Chapter 15/ch15-vue-component.html
rename to Chapter 15/Code Samples/ch15-vue-component.html
diff --git a/Chapter 15/ch15-vue.html b/Chapter 15/Code Samples/ch15-vue.html
similarity index 100%
rename from Chapter 15/ch15-vue.html
rename to Chapter 15/Code Samples/ch15-vue.html
diff --git a/Chapter 15/ch15_exampled3.html b/Chapter 15/Code Samples/ch15_exampled3.html
similarity index 100%
rename from Chapter 15/ch15_exampled3.html
rename to Chapter 15/Code Samples/ch15_exampled3.html
diff --git a/Chapter 15/ch15_examplereact.html b/Chapter 15/Code Samples/ch15_examplereact.html
similarity index 100%
rename from Chapter 15/ch15_examplereact.html
rename to Chapter 15/Code Samples/ch15_examplereact.html
diff --git a/Chapter 15/ch15_exampleunderscore.html b/Chapter 15/Code Samples/ch15_exampleunderscore.html
similarity index 100%
rename from Chapter 15/ch15_exampleunderscore.html
rename to Chapter 15/Code Samples/ch15_exampleunderscore.html
diff --git a/Chapter 2/ch2.js b/Chapter 2/Code Samples/ch2_snippets.js
similarity index 100%
rename from Chapter 2/ch2.js
rename to Chapter 2/Code Samples/ch2_snippets.js
diff --git a/Chapter 3/ch3.js b/Chapter 3/Code Samples/ch3_snippets.js
similarity index 100%
rename from Chapter 3/ch3.js
rename to Chapter 3/Code Samples/ch3_snippets.js
diff --git a/Chapter 4/ch4.js b/Chapter 4/Code Samples/ch4_snippets.js
similarity index 100%
rename from Chapter 4/ch4.js
rename to Chapter 4/Code Samples/ch4_snippets.js
diff --git a/Chapter 5/ch5.js b/Chapter 5/Code Samples/ch5_snippets.js
similarity index 100%
rename from Chapter 5/ch5.js
rename to Chapter 5/Code Samples/ch5_snippets.js
diff --git a/Chapter 6/ch6.js b/Chapter 6/Code Samples/ch6_snippets.js
similarity index 100%
rename from Chapter 6/ch6.js
rename to Chapter 6/Code Samples/ch6_snippets.js
diff --git a/Chapter 7/ch7classes.js b/Chapter 7/Code Samples/ch7_classes.js
similarity index 100%
rename from Chapter 7/ch7classes.js
rename to Chapter 7/Code Samples/ch7_classes.js
diff --git a/Chapter 7/ch7-helloweb.html b/Chapter 7/Code Samples/ch7_helloweb.html
similarity index 100%
rename from Chapter 7/ch7-helloweb.html
rename to Chapter 7/Code Samples/ch7_helloweb.html
diff --git a/Chapter 7/ch7.html b/Chapter 7/Code Samples/ch7_html.html
similarity index 100%
rename from Chapter 7/ch7.html
rename to Chapter 7/Code Samples/ch7_html.html
diff --git a/Chapter 9/ch9-accessing.html b/Chapter 9/Code Samples/ch9-accessing.html
similarity index 100%
rename from Chapter 9/ch9-accessing.html
rename to Chapter 9/Code Samples/ch9-accessing.html
diff --git a/Chapter 9/ch9-attributes.html b/Chapter 9/Code Samples/ch9-attributes.html
similarity index 100%
rename from Chapter 9/ch9-attributes.html
rename to Chapter 9/Code Samples/ch9-attributes.html
diff --git a/Chapter 9/ch9-classes.html b/Chapter 9/Code Samples/ch9-classes.html
similarity index 100%
rename from Chapter 9/ch9-classes.html
rename to Chapter 9/Code Samples/ch9-classes.html
diff --git a/Chapter 9/ch9-classes2.html b/Chapter 9/Code Samples/ch9-classes2.html
similarity index 100%
rename from Chapter 9/ch9-classes2.html
rename to Chapter 9/Code Samples/ch9-classes2.html
diff --git a/Chapter 9/ch9-classes3.html b/Chapter 9/Code Samples/ch9-classes3.html
similarity index 100%
rename from Chapter 9/ch9-classes3.html
rename to Chapter 9/Code Samples/ch9-classes3.html
diff --git a/Chapter 9/ch9-click.html b/Chapter 9/Code Samples/ch9-click.html
similarity index 100%
rename from Chapter 9/ch9-click.html
rename to Chapter 9/Code Samples/ch9-click.html
diff --git a/Chapter 9/ch9-colors.html b/Chapter 9/Code Samples/ch9-colors.html
similarity index 100%
rename from Chapter 9/ch9-colors.html
rename to Chapter 9/Code Samples/ch9-colors.html
diff --git a/Chapter 9/ch9-domflow.html b/Chapter 9/Code Samples/ch9-domflow.html
similarity index 100%
rename from Chapter 9/ch9-domflow.html
rename to Chapter 9/Code Samples/ch9-domflow.html
diff --git a/Chapter 9/ch9-event-listener.html b/Chapter 9/Code Samples/ch9-event-listener.html
similarity index 100%
rename from Chapter 9/ch9-event-listener.html
rename to Chapter 9/Code Samples/ch9-event-listener.html
diff --git a/Chapter 9/ch9-new-element.html b/Chapter 9/Code Samples/ch9-new-element.html
similarity index 100%
rename from Chapter 9/ch9-new-element.html
rename to Chapter 9/Code Samples/ch9-new-element.html
diff --git a/Chapter 9/ch9-selectionelements.html b/Chapter 9/Code Samples/ch9-selectionelements.html
similarity index 100%
rename from Chapter 9/ch9-selectionelements.html
rename to Chapter 9/Code Samples/ch9-selectionelements.html
diff --git a/Chapter 9/ch9-this.html b/Chapter 9/Code Samples/ch9-this.html
similarity index 100%
rename from Chapter 9/ch9-this.html
rename to Chapter 9/Code Samples/ch9-this.html
diff --git a/Chapter 9/ch9-toggle-visibility.html b/Chapter 9/Code Samples/ch9-toggle-visibility.html
similarity index 100%
rename from Chapter 9/ch9-toggle-visibility.html
rename to Chapter 9/Code Samples/ch9-toggle-visibility.html
diff --git a/Chapter 9/ch9-treasure.html b/Chapter 9/Code Samples/ch9-treasure.html
similarity index 100%
rename from Chapter 9/ch9-treasure.html
rename to Chapter 9/Code Samples/ch9-treasure.html

From 9116b5547720008bb487372958a7404bf73fa529 Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Wed, 1 Dec 2021 14:39:18 +0100
Subject: [PATCH 7/9] reorganizing some more

---
 .../Code Samples/ch13_asyncawait.js           |   0
 .../Code Samples/ch13_callbacks.js            |   0
 .../Code Samples/ch13_chainedpromises.js      |   0
 .../Code Samples/ch13_promises.js             |   0
 .../ch2_boolean_and_comparison.js             |  11 +
 .../ch2_calculations_conversions.js           |  43 ++++
 Chapter 2/Code Samples/ch2_snippets.js        | 184 ---------------
 .../Code Samples/ch2_strings_and_types.js     |  25 ++
 .../Code Samples/ch2_types_and_operations.js  |  64 +++++
 Chapter 2/Code Samples/ch2_undefined_null.js  |  11 +
 .../Code Samples/ch2_variables_basics.js      |  10 +
 .../Code Samples/ch2_variables_number.js      |   7 +
 .../Code Samples/ch2_variables_string.js      |   6 +
 Chapter 3/Code Samples/ch3_arrays.js          | 100 ++++++++
 .../{ch3_snippets.js => ch3_objects.js}       | 101 --------
 Chapter 4/Code Samples/ch4_if.js              |  49 ++++
 .../{ch4_snippets.js => ch4_switch.js}        |  50 ----
 ...ippets.js => ch5_break_continue_nested.js} | 124 ----------
 Chapter 5/Code Samples/ch5_do_while.js        |   8 +
 Chapter 5/Code Samples/ch5_for.js             |  34 +++
 Chapter 5/Code Samples/ch5_for_in_for_of.js   |  45 ++++
 Chapter 5/Code Samples/ch5_while.js           |  33 +++
 .../ch6_anonymous_nested_callbacks.js         |  59 +++++
 .../Code Samples/ch6_functions_params.js      |  51 ++++
 Chapter 6/Code Samples/ch6_recursion.js       |  35 +++
 Chapter 6/Code Samples/ch6_scope.js           |  72 ++++++
 Chapter 6/Code Samples/ch6_snippets.js        | 220 ------------------
 Chapter 8/Code Samples/ch8_arrays.js          |  41 ++++
 Chapter 8/Code Samples/ch8_dates.js           |  50 ++++
 Chapter 8/Code Samples/ch8_decode_encode.js   |  12 +
 Chapter 8/Code Samples/ch8_eval.html          |  12 +
 Chapter 8/Code Samples/ch8_examples.js        |   7 +
 Chapter 8/Code Samples/ch8_global_nan.js      |   3 +
 Chapter 8/Code Samples/ch8_math.js            |  43 ++++
 Chapter 8/Code Samples/ch8_numbers.js         |  36 +++
 Chapter 8/Code Samples/ch8_parsing.js         |  36 +++
 Chapter 8/Code Samples/ch8_strings.js         |  95 ++++++++
 37 files changed, 998 insertions(+), 679 deletions(-)
 rename Chapter 12/Code Samples/ch12_asyncawait.js => Chapter 13/Code Samples/ch13_asyncawait.js (100%)
 rename Chapter 12/Code Samples/ch12_callbacks.js => Chapter 13/Code Samples/ch13_callbacks.js (100%)
 rename Chapter 12/Code Samples/ch12_chainedpromises.js => Chapter 13/Code Samples/ch13_chainedpromises.js (100%)
 rename Chapter 12/Code Samples/ch12_promises.js => Chapter 13/Code Samples/ch13_promises.js (100%)
 create mode 100755 Chapter 2/Code Samples/ch2_boolean_and_comparison.js
 create mode 100755 Chapter 2/Code Samples/ch2_calculations_conversions.js
 delete mode 100755 Chapter 2/Code Samples/ch2_snippets.js
 create mode 100755 Chapter 2/Code Samples/ch2_strings_and_types.js
 create mode 100755 Chapter 2/Code Samples/ch2_types_and_operations.js
 create mode 100755 Chapter 2/Code Samples/ch2_undefined_null.js
 create mode 100755 Chapter 2/Code Samples/ch2_variables_basics.js
 create mode 100755 Chapter 2/Code Samples/ch2_variables_number.js
 create mode 100755 Chapter 2/Code Samples/ch2_variables_string.js
 create mode 100755 Chapter 3/Code Samples/ch3_arrays.js
 rename Chapter 3/Code Samples/{ch3_snippets.js => ch3_objects.js} (50%)
 create mode 100755 Chapter 4/Code Samples/ch4_if.js
 rename Chapter 4/Code Samples/{ch4_snippets.js => ch4_switch.js} (64%)
 rename Chapter 5/Code Samples/{ch5_snippets.js => ch5_break_continue_nested.js} (50%)
 create mode 100755 Chapter 5/Code Samples/ch5_do_while.js
 create mode 100755 Chapter 5/Code Samples/ch5_for.js
 create mode 100755 Chapter 5/Code Samples/ch5_for_in_for_of.js
 create mode 100755 Chapter 5/Code Samples/ch5_while.js
 create mode 100755 Chapter 6/Code Samples/ch6_anonymous_nested_callbacks.js
 create mode 100755 Chapter 6/Code Samples/ch6_functions_params.js
 create mode 100755 Chapter 6/Code Samples/ch6_recursion.js
 create mode 100755 Chapter 6/Code Samples/ch6_scope.js
 delete mode 100755 Chapter 6/Code Samples/ch6_snippets.js
 create mode 100644 Chapter 8/Code Samples/ch8_arrays.js
 create mode 100644 Chapter 8/Code Samples/ch8_dates.js
 create mode 100644 Chapter 8/Code Samples/ch8_decode_encode.js
 create mode 100644 Chapter 8/Code Samples/ch8_eval.html
 create mode 100644 Chapter 8/Code Samples/ch8_examples.js
 create mode 100644 Chapter 8/Code Samples/ch8_global_nan.js
 create mode 100644 Chapter 8/Code Samples/ch8_math.js
 create mode 100644 Chapter 8/Code Samples/ch8_numbers.js
 create mode 100644 Chapter 8/Code Samples/ch8_parsing.js
 create mode 100644 Chapter 8/Code Samples/ch8_strings.js

diff --git a/Chapter 12/Code Samples/ch12_asyncawait.js b/Chapter 13/Code Samples/ch13_asyncawait.js
similarity index 100%
rename from Chapter 12/Code Samples/ch12_asyncawait.js
rename to Chapter 13/Code Samples/ch13_asyncawait.js
diff --git a/Chapter 12/Code Samples/ch12_callbacks.js b/Chapter 13/Code Samples/ch13_callbacks.js
similarity index 100%
rename from Chapter 12/Code Samples/ch12_callbacks.js
rename to Chapter 13/Code Samples/ch13_callbacks.js
diff --git a/Chapter 12/Code Samples/ch12_chainedpromises.js b/Chapter 13/Code Samples/ch13_chainedpromises.js
similarity index 100%
rename from Chapter 12/Code Samples/ch12_chainedpromises.js
rename to Chapter 13/Code Samples/ch13_chainedpromises.js
diff --git a/Chapter 12/Code Samples/ch12_promises.js b/Chapter 13/Code Samples/ch13_promises.js
similarity index 100%
rename from Chapter 12/Code Samples/ch12_promises.js
rename to Chapter 13/Code Samples/ch13_promises.js
diff --git a/Chapter 2/Code Samples/ch2_boolean_and_comparison.js b/Chapter 2/Code Samples/ch2_boolean_and_comparison.js
new file mode 100755
index 0000000..87e5fda
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_boolean_and_comparison.js	
@@ -0,0 +1,11 @@
+let bool1 = false;
+let bool2 = true;
+console.log(typeof bool1)
+
+let str1 = "JavaScript is fun!";
+let str2 = "JavaScript is fun!";
+console.log("These two strings are the same:", str1 === str2);
+
+let sym1 = Symbol("JavaScript is fun!");
+let sym2 = Symbol("JavaScript is fun!");
+console.log("These two Symbols are the same:", sym1 === sym2);
diff --git a/Chapter 2/Code Samples/ch2_calculations_conversions.js b/Chapter 2/Code Samples/ch2_calculations_conversions.js
new file mode 100755
index 0000000..71bee3b
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_calculations_conversions.js	
@@ -0,0 +1,43 @@
+// let nr1 = 2;
+// let nr2 = "2";
+// console.log(nr1 * nr2);
+
+// let nr1 = 2;
+// let nr2 = "2";
+// console.log(nr1 + nr2);
+
+// let nrToStr = 6;
+// nrToStr = String(nrToStr);
+// console.log(nrToStr, typeof nrToStr);
+
+// let strToNr = "12";
+// strToNr = Number(strToNr);
+// console.log(strToNr, typeof strToNr);
+
+// let strToBool = "any string will return true";
+// strToBool = Boolean(strToBool);
+// console.log(strToBool, typeof strToBool);
+
+// let nullToNr = null;
+// nullToNr = Number(nullToNr);
+// console.log("null", nullToNr, typeof nullToNr);
+
+// let strToNr = "";
+// strToNr = Number(strToNr);
+// console.log("empty string", strToNr, typeof strToNr);
+
+// let strToNr2 = "hello";
+// strToNr2 = Number(strToNr2);
+// console.log(strToNr2, typeof strToNr2);
+
+// let strToBool = "";
+// strToBool = Boolean(strToBool);
+// console.log(strToBool, typeof strToBool);
+
+// let strToBool2 = "false";
+// strToBool2 = Boolean(strToBool2);
+// console.log(strToBool2, typeof strToBool2);
+
+// let nr1 = 2;
+// let nr2 = "2";
+// console.log(nr1 + Number(nr2));
diff --git a/Chapter 2/Code Samples/ch2_snippets.js b/Chapter 2/Code Samples/ch2_snippets.js
deleted file mode 100755
index 82254e8..0000000
--- a/Chapter 2/Code Samples/ch2_snippets.js	
+++ /dev/null
@@ -1,184 +0,0 @@
-// let firstname = "Maria";
-// firstname = "Jacky";
-
-// let nr1 = 12;
-// var nr2 = 8;
-// const pi = 3.14159;
-
-// throws a TypeError
-// const someConstant = 3;
-// someConstant = 4;
-
-// let singleString = 'Hi there!';
-// let doubleString = "How are you?";
-
-// let language = "JavaScript";
-// let message = `Let's learn ${language}`;
-// console.log(message);
-
-// let intNr = 1;
-// let decNr = 1.5;
-// let expNr = 1.4e15;
-
-// let bigNr = 90071992547409920n;
-// typeError
-// let result = bigNr + intNr;
-
-// let bool1 = false;
-// let bool2 = true;
-// console.log(typeof bool1)
-
-// let str1 = "JavaScript is fun!";
-// let str2 = "JavaScript is fun!";
-// console.log("These two strings are the same:", str1 === str2);
-
-// let sym1 = Symbol("JavaScript is fun!");
-// let sym2 = Symbol("JavaScript is fun!");
-// console.log("These two Symbols are the same:", sym1 === sym2);
-
-// let unassigned;
-// console.log(unassigned);
-
-// let terribleThingToDo = undefined;
-// let lastname;
-// console.log("Same undefined:", lastname === terribleThingToDo);
-
-// let betterOption = null;
-// console.log("Same null:", lastname === betterOption);
-
-// let empty = null;
-
-// let nr1 = 2;
-// let nr2 = "2";
-// console.log(nr1 * nr2);
-
-// let nr1 = 2;
-// let nr2 = "2";
-// console.log(nr1 + nr2);
-
-// let nrToStr = 6;
-// nrToStr = String(nrToStr);
-// console.log(nrToStr, typeof nrToStr);
-
-// let strToNr = "12";
-// strToNr = Number(strToNr);
-// console.log(strToNr, typeof strToNr);
-
-// let strToBool = "any string will return true";
-// strToBool = Boolean(strToBool);
-// console.log(strToBool, typeof strToBool);
-
-// let nullToNr = null;
-// nullToNr = Number(nullToNr);
-// console.log("null", nullToNr, typeof nullToNr);
-
-// let strToNr = "";
-// strToNr = Number(strToNr);
-// console.log("empty string", strToNr, typeof strToNr);
-
-// let strToNr2 = "hello";
-// strToNr2 = Number(strToNr2);
-// console.log(strToNr2, typeof strToNr2);
-
-// let strToBool = "";
-// strToBool = Boolean(strToBool);
-// console.log(strToBool, typeof strToBool);
-
-// let strToBool2 = "false";
-// strToBool2 = Boolean(strToBool2);
-// console.log(strToBool2, typeof strToBool2);
-
-// let nr1 = 2;
-// let nr2 = "2";
-// console.log(nr1 + Number(nr2));
-
-// let str = "Hello, what's your name? Is it \"Mike\"?";
-// console.log(str);
-// let str2 = 'Hello, what\'s your name? Is it "Mike"?';
-// console.log(str2);
-
-// let str3 = "New \nline."
-// let str4 = "I'm containing a backslash: \\!";
-// console.log(str3);
-// console.log(str4);
-
-// let str = "Hello";
-// let nr = 7;
-// let bigNr = 12345678901234n;
-// let bool = true;
-// let sym = Symbol("unique");
-// let undef = undefined;
-// let unknown = null;
-
-// console.log("str", typeof str);
-// console.log("nr", typeof nr);
-// console.log("bigNr", typeof bigNr);
-// console.log("bool", typeof bool);
-// console.log("sym", typeof sym);
-// console.log("undef", typeof undef);
-// console.log("unknown", typeof unknown);
-
-// let nr1 = 12;
-// let nr2 = 14;
-// let str1 = "Hello ";
-// let str2 = "addition";
-// let result1 = nr1 + nr2;
-// let result2 = str1 + str2;
-// console.log(result1, result2);
-
-// let nr1 = 20;
-// let nr2 = 4;
-// let str1 = "Hi ";
-// let nr3 = 3;
-// let result1 = nr1 - nr2;
-// let result2 = str1 - nr3;
-// console.log(result1, result2);
-
-// let nr1 = 15;
-// let nr2 = 10;
-// let str1 = "Hi";
-// let nr3 = 3;
-// let result1 = nr1 * nr2;
-// let result2 = str1 * nr3;
-// console.log(result1, result2);
-
-// let nr1 = 30;
-// let nr2 = 5;
-// let result1 = nr1 / nr2;
-// console.log(result1);
-
-// let nr1 = 2;
-// let nr2 = 3;
-// let result1 = nr1 ** nr2;
-// console.log(result1);
-
-// let nr1 = 10;
-// let nr2 = 3;
-// let result1 = nr1 % nr2;
-// console.log(`${nr1} % ${nr2} = ${result1}`);
-
-// let nr3 = 8;
-// let nr4 = 2;
-// let result2 = nr3 % nr4;
-// console.log(`${nr3} % ${nr4} = ${result2}`);
-
-// let nr5 = 15;
-// let nr6 = 4;
-// let result3 = nr5 % nr6;
-// console.log(`${nr5} % ${nr6} = ${result3}`);
-
-// let nr = 4;
-// nr++;
-// console.log(nr);
-
-// let nr = 2;
-// console.log(nr++);
-// console.log(nr);
-
-// let nr = 2;
-// console.log(++nr);
-
-let nr1 = 4;
-let nr2 = 5;
-let nr3 = 2;
-console.log(nr1++ + ++nr2 * nr3++);
\ No newline at end of file
diff --git a/Chapter 2/Code Samples/ch2_strings_and_types.js b/Chapter 2/Code Samples/ch2_strings_and_types.js
new file mode 100755
index 0000000..f5bbf8f
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_strings_and_types.js	
@@ -0,0 +1,25 @@
+let str = "Hello, what's your name? Is it \"Mike\"?";
+console.log(str);
+let str2 = 'Hello, what\'s your name? Is it "Mike"?';
+console.log(str2);
+
+let str3 = "New \nline."
+let str4 = "I'm containing a backslash: \\!";
+console.log(str3);
+console.log(str4);
+
+let str = "Hello";
+let nr = 7;
+let bigNr = 12345678901234n;
+let bool = true;
+let sym = Symbol("unique");
+let undef = undefined;
+let unknown = null;
+
+console.log("str", typeof str);
+console.log("nr", typeof nr);
+console.log("bigNr", typeof bigNr);
+console.log("bool", typeof bool);
+console.log("sym", typeof sym);
+console.log("undef", typeof undef);
+console.log("unknown", typeof unknown);
diff --git a/Chapter 2/Code Samples/ch2_types_and_operations.js b/Chapter 2/Code Samples/ch2_types_and_operations.js
new file mode 100755
index 0000000..fb62206
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_types_and_operations.js	
@@ -0,0 +1,64 @@
+// let nr1 = 12;
+// let nr2 = 14;
+// let str1 = "Hello ";
+// let str2 = "addition";
+// let result1 = nr1 + nr2;
+// let result2 = str1 + str2;
+// console.log(result1, result2);
+
+// let nr1 = 20;
+// let nr2 = 4;
+// let str1 = "Hi ";
+// let nr3 = 3;
+// let result1 = nr1 - nr2;
+// let result2 = str1 - nr3;
+// console.log(result1, result2);
+
+// let nr1 = 15;
+// let nr2 = 10;
+// let str1 = "Hi";
+// let nr3 = 3;
+// let result1 = nr1 * nr2;
+// let result2 = str1 * nr3;
+// console.log(result1, result2);
+
+// let nr1 = 30;
+// let nr2 = 5;
+// let result1 = nr1 / nr2;
+// console.log(result1);
+
+// let nr1 = 2;
+// let nr2 = 3;
+// let result1 = nr1 ** nr2;
+// console.log(result1);
+
+// let nr1 = 10;
+// let nr2 = 3;
+// let result1 = nr1 % nr2;
+// console.log(`${nr1} % ${nr2} = ${result1}`);
+
+// let nr3 = 8;
+// let nr4 = 2;
+// let result2 = nr3 % nr4;
+// console.log(`${nr3} % ${nr4} = ${result2}`);
+
+// let nr5 = 15;
+// let nr6 = 4;
+// let result3 = nr5 % nr6;
+// console.log(`${nr5} % ${nr6} = ${result3}`);
+
+// let nr = 4;
+// nr++;
+// console.log(nr);
+
+// let nr = 2;
+// console.log(nr++);
+// console.log(nr);
+
+// let nr = 2;
+// console.log(++nr);
+
+let nr1 = 4;
+let nr2 = 5;
+let nr3 = 2;
+console.log(nr1++ + ++nr2 * nr3++);
\ No newline at end of file
diff --git a/Chapter 2/Code Samples/ch2_undefined_null.js b/Chapter 2/Code Samples/ch2_undefined_null.js
new file mode 100755
index 0000000..63fd30a
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_undefined_null.js	
@@ -0,0 +1,11 @@
+let unassigned;
+console.log(unassigned);
+
+let terribleThingToDo = undefined;
+let lastname;
+console.log("Same undefined:", lastname === terribleThingToDo);
+
+let betterOption = null;
+console.log("Same null:", lastname === betterOption);
+
+let empty = null;
diff --git a/Chapter 2/Code Samples/ch2_variables_basics.js b/Chapter 2/Code Samples/ch2_variables_basics.js
new file mode 100755
index 0000000..0bcb836
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_variables_basics.js	
@@ -0,0 +1,10 @@
+let firstname = "Maria";
+firstname = "Jacky";
+
+let nr1 = 12;
+var nr2 = 8;
+const pi = 3.14159;
+
+// throws a TypeError
+const someConstant = 3;
+someConstant = 4;
diff --git a/Chapter 2/Code Samples/ch2_variables_number.js b/Chapter 2/Code Samples/ch2_variables_number.js
new file mode 100755
index 0000000..e43ecd0
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_variables_number.js	
@@ -0,0 +1,7 @@
+let intNr = 1;
+let decNr = 1.5;
+let expNr = 1.4e15;
+
+let bigNr = 90071992547409920n;
+// typeError
+let result = bigNr + intNr;
diff --git a/Chapter 2/Code Samples/ch2_variables_string.js b/Chapter 2/Code Samples/ch2_variables_string.js
new file mode 100755
index 0000000..8bff38f
--- /dev/null
+++ b/Chapter 2/Code Samples/ch2_variables_string.js	
@@ -0,0 +1,6 @@
+let singleString = 'Hi there!';
+let doubleString = "How are you?";
+
+let language = "JavaScript";
+let message = `Let's learn ${language}`;
+console.log(message);
diff --git a/Chapter 3/Code Samples/ch3_arrays.js b/Chapter 3/Code Samples/ch3_arrays.js
new file mode 100755
index 0000000..716679f
--- /dev/null
+++ b/Chapter 3/Code Samples/ch3_arrays.js	
@@ -0,0 +1,100 @@
+arr1 = new Array("purple", "green", "yellow");
+arr2 = ["black", "orange", "pink"];
+
+arr3 = new Array(10);
+arr4 = [10];
+
+console.log(arr3);
+console.log(arr4);
+
+cars = ["Toyota", "Renault", "Volkswagen"];
+console.log(cars[0]);
+console.log(cars[1]);
+console.log(cars[2]);
+console.log(cars[3]);
+console.log(cars[-1]);
+
+cars[0] = "Tesla";
+console.log(cars[0]);
+
+cars[3] = "Kia";
+cars[-1] = "Fiat";
+console.log(cars[3]);
+console.log(cars[-1]);
+
+colors = ["black", "orange", "pink"]
+booleans = [true, false, false, true];
+emptyArray = [];
+
+console.log("Length of colors:", colors.length);
+console.log("Length of booleans:", booleans.length);
+console.log("Length of emtpy array:", emptyArray.length);
+
+lastElement = colors[colors.length - 1];
+console.log(lastElement);
+
+numbers = [12, 24, 36];
+numbers[-1] = 0;
+numbers[5] = 48;
+console.log(numbers.length);
+
+console.log("numbers", numbers);
+
+favoriteFruits = ["grapefruit", "orange", "lemon"];
+favoriteFruits.push("tangerine");
+
+let lengthOfFavoriteFruits = favoriteFruits.push("lime");
+console.log(lengthOfFavoriteFruits);
+console.log(favoriteFruits);
+
+let arrOfShapes = ["circle", "triangle", "rectangle", "pentagon"];
+arrOfShapes.splice(2, 0, "square", "trapezoid");
+console.log(arrOfShapes);
+
+let arr5 = [1, 2, 3];
+let arr6 = [4, 5, 6];
+let arr7 = arr5.concat(arr6);
+console.log(arr7);
+
+let arr8 = arr7.concat(7, 8, 9);
+console.log(arr8);
+
+arr8.pop();
+console.log(arr8);
+
+arr8.shift();
+console.log(arr8);
+
+arr8.splice(1, 3);
+console.log(arr8);
+
+delete arr8[0];
+console.log(arr8); 
+
+let findValue = arr8.find(() => e === 6);
+let findValue2 = arr8.find(() => e === 8);
+console.log(findValue, findValue2);
+
+let findIndex = arr8.indexOf(6);
+let findIndex2 = arr8.indexOf(10);
+let findIndex3 = arr8.indexOf(6, 2);
+console.log(findIndex, findIndex2, findIndex3);
+
+let animals = ["dog", "horse", "cat", "platypus", "dog"]
+let lastDog = animals.lastIndexOf("dog");
+console.log(lastDog);
+
+
+let names = ["James", "Alicia", "Fatiha", "Maria", "Bert"];
+names.sort();
+
+let ages = [18, 72, 33, 56, 40];
+ages.sort();
+
+console.log(names);
+console.log(ages);
+
+names.reverse();
+console.log(names);
+
+console.log(typeof arr1);
diff --git a/Chapter 3/Code Samples/ch3_snippets.js b/Chapter 3/Code Samples/ch3_objects.js
similarity index 50%
rename from Chapter 3/Code Samples/ch3_snippets.js
rename to Chapter 3/Code Samples/ch3_objects.js
index 675884e..8b72d8d 100755
--- a/Chapter 3/Code Samples/ch3_snippets.js	
+++ b/Chapter 3/Code Samples/ch3_objects.js	
@@ -1,104 +1,3 @@
-arr1 = new Array("purple", "green", "yellow");
-arr2 = ["black", "orange", "pink"];
-
-arr3 = new Array(10);
-arr4 = [10];
-
-console.log(arr3);
-console.log(arr4);
-
-cars = ["Toyota", "Renault", "Volkswagen"];
-console.log(cars[0]);
-console.log(cars[1]);
-console.log(cars[2]);
-console.log(cars[3]);
-console.log(cars[-1]);
-
-cars[0] = "Tesla";
-console.log(cars[0]);
-
-cars[3] = "Kia";
-cars[-1] = "Fiat";
-console.log(cars[3]);
-console.log(cars[-1]);
-
-colors = ["black", "orange", "pink"]
-booleans = [true, false, false, true];
-emptyArray = [];
-
-console.log("Length of colors:", colors.length);
-console.log("Length of booleans:", booleans.length);
-console.log("Length of emtpy array:", emptyArray.length);
-
-lastElement = colors[colors.length - 1];
-console.log(lastElement);
-
-numbers = [12, 24, 36];
-numbers[-1] = 0;
-numbers[5] = 48;
-console.log(numbers.length);
-
-console.log("numbers", numbers);
-
-favoriteFruits = ["grapefruit", "orange", "lemon"];
-favoriteFruits.push("tangerine");
-
-let lengthOfFavoriteFruits = favoriteFruits.push("lime");
-console.log(lengthOfFavoriteFruits);
-console.log(favoriteFruits);
-
-let arrOfShapes = ["circle", "triangle", "rectangle", "pentagon"];
-arrOfShapes.splice(2, 0, "square", "trapezoid");
-console.log(arrOfShapes);
-
-let arr5 = [1, 2, 3];
-let arr6 = [4, 5, 6];
-let arr7 = arr5.concat(arr6);
-console.log(arr7);
-
-let arr8 = arr7.concat(7, 8, 9);
-console.log(arr8);
-
-arr8.pop();
-console.log(arr8);
-
-arr8.shift();
-console.log(arr8);
-
-arr8.splice(1, 3);
-console.log(arr8);
-
-delete arr8[0];
-console.log(arr8); 
-
-let findValue = arr8.find(() => e === 6);
-let findValue2 = arr8.find(() => e === 8);
-console.log(findValue, findValue2);
-
-let findIndex = arr8.indexOf(6);
-let findIndex2 = arr8.indexOf(10);
-let findIndex3 = arr8.indexOf(6, 2);
-console.log(findIndex, findIndex2, findIndex3);
-
-let animals = ["dog", "horse", "cat", "platypus", "dog"]
-let lastDog = animals.lastIndexOf("dog");
-console.log(lastDog);
-
-
-let names = ["James", "Alicia", "Fatiha", "Maria", "Bert"];
-names.sort();
-
-let ages = [18, 72, 33, 56, 40];
-ages.sort();
-
-console.log(names);
-console.log(ages);
-
-names.reverse();
-console.log(names);
-
-console.log(typeof arr1);
-
 let dog = { dogName: "JavaScript", 
             weight: 2.4, 
             color: "brown", 
diff --git a/Chapter 4/Code Samples/ch4_if.js b/Chapter 4/Code Samples/ch4_if.js
new file mode 100755
index 0000000..41ed67f
--- /dev/null
+++ b/Chapter 4/Code Samples/ch4_if.js	
@@ -0,0 +1,49 @@
+// let rain = true;
+
+// if(rain){
+//   console.log("** Taking my umbrella when I need to go outside **");
+// } else {
+//   console.log("** I can leave my umbrella at home **");
+// }
+
+// if(expression) {
+//   // code associated with the if block
+//   // will only be executed if the expression is true
+// } else {
+//   // code associated with the else block
+//   // we don't need an else block, it is optional
+//   // this code will only be executed if the expression is false
+// }
+
+let age = 16;
+
+if(age < 18) {
+  console.log("We're very sorry, but you can't get in under 18");
+} else {
+  console.log("Welcome!");
+}
+
+if(age < 3){
+  console.log("Access is free under three.");
+} else if(age >=3 && age < 12) {
+  console.log("With the child discount, the access fee is 5 dollar");
+} else if(age >=12 && age < 65) {
+  console.log("A regular ticket costs 10 dollar.");
+} else if(age >= 65) {
+  console.log("A ticket is 7 dollars.");
+}
+
+if(age < 3){
+  console.log("Access is free under three.");
+} else if(age < 12) {
+  console.log("With the child discount, the access fee is 5 dollar");
+} else if(age < 65) {
+  console.log("A regular ticket costs 10 dollar.");
+} else if(age >= 65) {
+  console.log("A ticket is 7 dollars.");
+}
+
+let access = age < 18 ? "denied" : "allowed";
+console.log(access);
+
+age < 18 ? console.log("denied") : console.log("allowed");
diff --git a/Chapter 4/Code Samples/ch4_snippets.js b/Chapter 4/Code Samples/ch4_switch.js
similarity index 64%
rename from Chapter 4/Code Samples/ch4_snippets.js
rename to Chapter 4/Code Samples/ch4_switch.js
index 8d3f229..83168aa 100755
--- a/Chapter 4/Code Samples/ch4_snippets.js	
+++ b/Chapter 4/Code Samples/ch4_switch.js	
@@ -1,53 +1,3 @@
-// let rain = true;
-
-// if(rain){
-//   console.log("** Taking my umbrella when I need to go outside **");
-// } else {
-//   console.log("** I can leave my umbrella at home **");
-// }
-
-// if(expression) {
-//   // code associated with the if block
-//   // will only be executed if the expression is true
-// } else {
-//   // code associated with the else block
-//   // we don't need an else block, it is optional
-//   // this code will only be executed if the expression is false
-// }
-
-let age = 16;
-
-if(age < 18) {
-  console.log("We're very sorry, but you can't get in under 18");
-} else {
-  console.log("Welcome!");
-}
-
-if(age < 3){
-  console.log("Access is free under three.");
-} else if(age >=3 && age < 12) {
-  console.log("With the child discount, the access fee is 5 dollar");
-} else if(age >=12 && age < 65) {
-  console.log("A regular ticket costs 10 dollar.");
-} else if(age >= 65) {
-  console.log("A ticket is 7 dollars.");
-}
-
-if(age < 3){
-  console.log("Access is free under three.");
-} else if(age < 12) {
-  console.log("With the child discount, the access fee is 5 dollar");
-} else if(age < 65) {
-  console.log("A regular ticket costs 10 dollar.");
-} else if(age >= 65) {
-  console.log("A ticket is 7 dollars.");
-}
-
-let access = age < 18 ? "denied" : "allowed";
-console.log(access);
-
-age < 18 ? console.log("denied") : console.log("allowed");
-
 let activity = "Lunch";
 
 if(activity === "Get up") {
diff --git a/Chapter 5/Code Samples/ch5_snippets.js b/Chapter 5/Code Samples/ch5_break_continue_nested.js
similarity index 50%
rename from Chapter 5/Code Samples/ch5_snippets.js
rename to Chapter 5/Code Samples/ch5_break_continue_nested.js
index a373629..8fe1132 100755
--- a/Chapter 5/Code Samples/ch5_snippets.js	
+++ b/Chapter 5/Code Samples/ch5_break_continue_nested.js	
@@ -1,127 +1,3 @@
-let i = 0;
-while (i < 10) {
-  console.log(i);
-  i++;
-}
-
-let someArray = ["Mike", "Antal", "Marc", "Emir", "Louiza", "Jacky"];
-let notFound = true;
-
-while (notFound && someArray.length > 0) {
-  if (someArray[0] === "Louiza") {
-    console.log("Found her!");
-    notFound = false;
-  } else {
-    someArray.shift();
-  }
-}
-
-console.log(someArray);
-
-let nr1 = 0;
-let nr2 = 1;
-let temp;
-fibonacciArray = [];
-
-while (fibonacciArray.length < 25) {
-  fibonacciArray.push(nr1);
-  temp = nr1 + nr2;
-  nr1 = nr2;
-  nr2 = temp;
-}
-
-console.log(fibonacciArray);
-
-do {
-  // code to be executed if the condition is true
-} while (true);
-
-let number;
-do {
-  number = prompt("Please enter a number between 0 and 100: ");
-} while (!(number >= 0 && number < 100));
-
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-
-let arr = [];
-for (let i = 0; i < 100; i++) {
-  arr.push(i);
-}
-
-let arr = [];
-for (let i = 0; i < 100; i = i + 2) {
-  arr.push(i);
-}
-
-let arrOfArrays = [];
-for (let i = 0; i < 3; i++) {
-  arrOfArrays.push([]);
-  for (let j = 0; j < 7; j++) {
-    arrOfArrays[i].push(j);
-  }
-}
-
-console.log(arrOfArrays);
-
-let names = ["chantal", "john", "maxime", "bobbi", "jair"];
-for (let i = 0; i < names.length; i++) {
-  console.log(names[i]);
-}
-
-//let names = ["chantal", "john", "maxime", "bobbi", "jair"];
-for (let i = 0; i < names.length; i++) {
-  names[i] = "hello " + names[i];
-}
-console.log(names);
-
-for (let name of names) {
-  console.log(name);
-}
-
-let car = {
-  model: "Golf",
-  make: "Volkswagen",
-  year: 1999,
-  color: "black",
-};
-
-for (let prop in car) {
-  console.log(car[prop]);
-}
-
-for (let prop in car) {
-  console.log(prop);
-}
-
-let cars = [
-  {
-    model: "Golf",
-    make: "Volkswagen",
-    year: 1999,
-    color: "black",
-  },
-  {
-    model: "Picanto",
-    make: "Kia",
-    year: 2020,
-    color: "red",
-  },
-  {
-    model: "Peugeot",
-    make: "208",
-    year: 2021,
-    color: "black",
-  },
-  {
-    model: "Fiat",
-    make: "Punto",
-    year: 2020,
-    color: "black",
-  },
-];
-
 for (let i = 0; i < 10; i++) {
   console.log(i);
   if (i === 4) {
diff --git a/Chapter 5/Code Samples/ch5_do_while.js b/Chapter 5/Code Samples/ch5_do_while.js
new file mode 100755
index 0000000..eb406e0
--- /dev/null
+++ b/Chapter 5/Code Samples/ch5_do_while.js	
@@ -0,0 +1,8 @@
+do {
+  // code to be executed if the condition is true
+} while (true);
+
+let number;
+do {
+  number = prompt("Please enter a number between 0 and 100: ");
+} while (!(number >= 0 && number < 100));
diff --git a/Chapter 5/Code Samples/ch5_for.js b/Chapter 5/Code Samples/ch5_for.js
new file mode 100755
index 0000000..c778bb6
--- /dev/null
+++ b/Chapter 5/Code Samples/ch5_for.js	
@@ -0,0 +1,34 @@
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+
+let arr = [];
+for (let i = 0; i < 100; i++) {
+  arr.push(i);
+}
+
+let arr = [];
+for (let i = 0; i < 100; i = i + 2) {
+  arr.push(i);
+}
+
+let arrOfArrays = [];
+for (let i = 0; i < 3; i++) {
+  arrOfArrays.push([]);
+  for (let j = 0; j < 7; j++) {
+    arrOfArrays[i].push(j);
+  }
+}
+
+console.log(arrOfArrays);
+
+let names = ["chantal", "john", "maxime", "bobbi", "jair"];
+for (let i = 0; i < names.length; i++) {
+  console.log(names[i]);
+}
+
+//let names = ["chantal", "john", "maxime", "bobbi", "jair"];
+for (let i = 0; i < names.length; i++) {
+  names[i] = "hello " + names[i];
+}
+console.log(names);
diff --git a/Chapter 5/Code Samples/ch5_for_in_for_of.js b/Chapter 5/Code Samples/ch5_for_in_for_of.js
new file mode 100755
index 0000000..9d5ea1e
--- /dev/null
+++ b/Chapter 5/Code Samples/ch5_for_in_for_of.js	
@@ -0,0 +1,45 @@
+for (let name of names) {
+  console.log(name);
+}
+
+let car = {
+  model: "Golf",
+  make: "Volkswagen",
+  year: 1999,
+  color: "black",
+};
+
+for (let prop in car) {
+  console.log(car[prop]);
+}
+
+for (let prop in car) {
+  console.log(prop);
+}
+
+let cars = [
+  {
+    model: "Golf",
+    make: "Volkswagen",
+    year: 1999,
+    color: "black",
+  },
+  {
+    model: "Picanto",
+    make: "Kia",
+    year: 2020,
+    color: "red",
+  },
+  {
+    model: "Peugeot",
+    make: "208",
+    year: 2021,
+    color: "black",
+  },
+  {
+    model: "Fiat",
+    make: "Punto",
+    year: 2020,
+    color: "black",
+  },
+];
diff --git a/Chapter 5/Code Samples/ch5_while.js b/Chapter 5/Code Samples/ch5_while.js
new file mode 100755
index 0000000..c37ff76
--- /dev/null
+++ b/Chapter 5/Code Samples/ch5_while.js	
@@ -0,0 +1,33 @@
+let i = 0;
+while (i < 10) {
+  console.log(i);
+  i++;
+}
+
+let someArray = ["Mike", "Antal", "Marc", "Emir", "Louiza", "Jacky"];
+let notFound = true;
+
+while (notFound && someArray.length > 0) {
+  if (someArray[0] === "Louiza") {
+    console.log("Found her!");
+    notFound = false;
+  } else {
+    someArray.shift();
+  }
+}
+
+console.log(someArray);
+
+let nr1 = 0;
+let nr2 = 1;
+let temp;
+fibonacciArray = [];
+
+while (fibonacciArray.length < 25) {
+  fibonacciArray.push(nr1);
+  temp = nr1 + nr2;
+  nr1 = nr2;
+  nr2 = temp;
+}
+
+console.log(fibonacciArray);
diff --git a/Chapter 6/Code Samples/ch6_anonymous_nested_callbacks.js b/Chapter 6/Code Samples/ch6_anonymous_nested_callbacks.js
new file mode 100755
index 0000000..436949d
--- /dev/null
+++ b/Chapter 6/Code Samples/ch6_anonymous_nested_callbacks.js	
@@ -0,0 +1,59 @@
+function doingStuffAnonymously() {
+  console.log("Not so secret though.");
+}
+
+let functionVariable = function () {
+  console.log("Not so secret though.");
+};
+
+functionVariable();
+
+function doFlexibleStuff(executeStuff) {
+  executeStuff();
+  console.log("Inside doFlexibleStuffFunction.");
+}
+
+doFlexibleStuff(functionVariable);
+
+let anotherFunctionVariable = function () {
+  console.log("Another anonymous function implementation.");
+};
+
+doFlexibleStuff(anotherFunctionVariable);
+
+function doOuterFunctionStuff(nr) {
+  console.log("Outer function");
+  doInnerFunctionStuff(nr);
+  function doInnerFunctionStuff(x) {
+    console.log(x + 7);
+    console.log("I can access outer variables:", nr);
+  }
+}
+
+doOuterFunctionStuff(2);
+
+function doOuterFunctionStuff(nr) {
+  doInnerFunctionStuff(nr);
+  function doInnerFunctionStuff(x) {
+    let z = 10;
+  }
+  console.log("Not accessible:", z);
+}
+
+doOuterFunctionStuff(2);
+
+function doOuterFunctionStuff(nr) {
+  doInnerFunctionStuff(nr);
+  function doInnerFunctionStuff(x) {
+    let z = 10;
+  }
+}
+
+doInnerFunctionStuff(3);
+
+let youGotThis = function () {
+  console.log("You're doing really well, keep coding!");
+};
+
+setTimeout(youGotThis, 1000);
+setInterval(youGotThis, 1000);
diff --git a/Chapter 6/Code Samples/ch6_functions_params.js b/Chapter 6/Code Samples/ch6_functions_params.js
new file mode 100755
index 0000000..30e2a06
--- /dev/null
+++ b/Chapter 6/Code Samples/ch6_functions_params.js	
@@ -0,0 +1,51 @@
+function hiThere() {
+  let you = prompt("What's your name? ");
+  console.log("Hello", you, "!");
+}
+
+hiThere();
+
+console.log("this is an argument");
+prompt("argument here too");
+
+let arr = [];
+arr.push("argument");
+
+function addTwoNumbers(x, y) {
+  console.log(x + y);
+}
+
+addTwoNumbers(3, 4);
+addTwoNumbers(12, -90);
+
+function myFunc(param1, param2) {
+  // code of the function;
+}
+
+myFunc("arg1", "arg2");
+
+function addTwoNumbers(x = 2, y = 3) {
+  console.log(x + y);
+}
+
+addTwoNumbers();
+addTwoNumbers(6, 6);
+addTwoNumbers(10);
+
+let favoriteSubject = prompt("What is your favorite subject?");
+
+let result = addTwoNumbers(4, 5);
+console.log(result);
+
+function addTwoNumbers(x, y) {
+  return x + y;
+}
+
+let results = [];
+
+for (let i = 0; i < 10; i++) {
+  let result = addTwoNumbers(i, 2 * i);
+  results.push(result);
+}
+
+console.log(results);
diff --git a/Chapter 6/Code Samples/ch6_recursion.js b/Chapter 6/Code Samples/ch6_recursion.js
new file mode 100755
index 0000000..969015f
--- /dev/null
+++ b/Chapter 6/Code Samples/ch6_recursion.js	
@@ -0,0 +1,35 @@
+function getRecursive(nr) {
+  console.log(nr);
+  getRecursive(--nr);
+}
+
+getRecursive(3);
+
+function logRecursive(nr) {
+  console.log("Started function:", nr);
+  if (nr > 0) {
+    logRecursive(nr - 1);
+  } else {
+    console.log("done with recursion");
+  }
+  console.log("Ended function:", nr);
+}
+
+logRecursive(3);
+
+function getRecursive(nr) {
+  console.log(nr);
+  if (nr > 0) {
+    getRecursive(--nr);
+  }
+}
+
+getRecursive(3);
+
+function calcFactorial(nr) {
+  if (nr === 0) {
+    return 1;
+  } else {
+    return nr * calcFactorial(--nr);
+  }
+}
diff --git a/Chapter 6/Code Samples/ch6_scope.js b/Chapter 6/Code Samples/ch6_scope.js
new file mode 100755
index 0000000..ecc49eb
--- /dev/null
+++ b/Chapter 6/Code Samples/ch6_scope.js	
@@ -0,0 +1,72 @@
+function testAvailability(x) {
+  console.log("Available here:", x);
+}
+
+testAvailability("Hi!");
+console.log("Not available here:", x);
+
+function testAvailability() {
+  let y = "Local variable!";
+  console.log("Available here:", y);
+}
+
+testAvailability();
+console.log("Not available here:", y);
+
+function testAvailability() {
+  let y = "I'll return";
+  console.log("Available here:", y);
+  return y;
+}
+
+let z = testAvailability();
+console.log("Outside the function:", z);
+console.log("Not available here:", y);
+
+let globalVar = "Accessible everywhere!";
+console.log("Outside function:", globalVar);
+
+function creatingNewScope(x) {
+  console.log("Access to global variables from inside functions.", globalVar);
+}
+
+creatingNewScope("some parameter");
+
+console.log("Still available:", globalVar);
+
+function doingStuff() {
+  if (true) {
+    var x = "local";
+  }
+  console.log(x);
+}
+
+doingStuff();
+
+function doingStuff() {
+  if (true) {
+    let x = "local";
+  }
+  console.log(x);
+}
+
+doingStuff();
+
+let x = "global";
+
+function doingStuff() {
+  let x = "local";
+  console.log(x);
+}
+
+doingStuff();
+
+var x = "global";
+
+function confuseReader() {
+  x = "Guess my scope...";
+  console.log("Inside the function:", x);
+}
+
+confuseReader();
+console.log("Outside of function:", x);
diff --git a/Chapter 6/Code Samples/ch6_snippets.js b/Chapter 6/Code Samples/ch6_snippets.js
deleted file mode 100755
index 1e8fa73..0000000
--- a/Chapter 6/Code Samples/ch6_snippets.js	
+++ /dev/null
@@ -1,220 +0,0 @@
-function hiThere() {
-  let you = prompt("What's your name? ");
-  console.log("Hello", you, "!");
-}
-
-hiThere();
-
-console.log("this is an argument");
-prompt("argument here too");
-
-let arr = [];
-arr.push("argument");
-
-function addTwoNumbers(x, y) {
-  console.log(x + y);
-}
-
-addTwoNumbers(3, 4);
-addTwoNumbers(12, -90);
-
-function myFunc(param1, param2) {
-  // code of the function;
-}
-
-myFunc("arg1", "arg2");
-
-function addTwoNumbers(x = 2, y = 3) {
-  console.log(x + y);
-}
-
-addTwoNumbers();
-addTwoNumbers(6, 6);
-addTwoNumbers(10);
-
-let favoriteSubject = prompt("What is your favorite subject?");
-
-let result = addTwoNumbers(4, 5);
-console.log(result);
-
-function addTwoNumbers(x, y) {
-  return x + y;
-}
-
-let results = [];
-
-for (let i = 0; i < 10; i++) {
-  let result = addTwoNumbers(i, 2 * i);
-  results.push(result);
-}
-
-console.log(results);
-
-function testAvailability(x) {
-  console.log("Available here:", x);
-}
-
-testAvailability("Hi!");
-console.log("Not available here:", x);
-
-function testAvailability() {
-  let y = "Local variable!";
-  console.log("Available here:", y);
-}
-
-testAvailability();
-console.log("Not available here:", y);
-
-function testAvailability() {
-  let y = "I'll return";
-  console.log("Available here:", y);
-  return y;
-}
-
-let z = testAvailability();
-console.log("Outside the function:", z);
-console.log("Not available here:", y);
-
-let globalVar = "Accessible everywhere!";
-console.log("Outside function:", globalVar);
-
-function creatingNewScope(x) {
-  console.log("Access to global variables from inside functions.", globalVar);
-}
-
-creatingNewScope("some parameter");
-
-console.log("Still available:", globalVar);
-
-function doingStuff() {
-  if (true) {
-    var x = "local";
-  }
-  console.log(x);
-}
-
-doingStuff();
-
-function doingStuff() {
-  if (true) {
-    let x = "local";
-  }
-  console.log(x);
-}
-
-doingStuff();
-
-let x = "global";
-
-function doingStuff() {
-  let x = "local";
-  console.log(x);
-}
-
-doingStuff();
-
-var x = "global";
-
-function confuseReader() {
-  x = "Guess my scope...";
-  console.log("Inside the function:", x);
-}
-
-confuseReader();
-console.log("Outside of function:", x);
-
-function getRecursive(nr) {
-  console.log(nr);
-  getRecursive(--nr);
-}
-
-getRecursive(3);
-
-function logRecursive(nr) {
-  console.log("Started function:", nr);
-  if (nr > 0) {
-    logRecursive(nr - 1);
-  } else {
-    console.log("done with recursion");
-  }
-  console.log("Ended function:", nr);
-}
-
-logRecursive(3);
-
-function getRecursive(nr) {
-  console.log(nr);
-  if (nr > 0) {
-    getRecursive(--nr);
-  }
-}
-
-getRecursive(3);
-
-function calcFactorial(nr) {
-  if (nr === 0) {
-    return 1;
-  } else {
-    return nr * calcFactorial(--nr);
-  }
-}
-
-function doingStuffAnonymously() {
-  console.log("Not so secret though.");
-}
-
-let functionVariable = function () {
-  console.log("Not so secret though.");
-};
-
-functionVariable();
-
-function doFlexibleStuff(executeStuff) {
-  executeStuff();
-  console.log("Inside doFlexibleStuffFunction.");
-}
-
-doFlexibleStuff(functionVariable);
-
-let anotherFunctionVariable = function () {
-  console.log("Another anonymous function implementation.");
-};
-
-doFlexibleStuff(anotherFunctionVariable);
-
-function doOuterFunctionStuff(nr) {
-  console.log("Outer function");
-  doInnerFunctionStuff(nr);
-  function doInnerFunctionStuff(x) {
-    console.log(x + 7);
-    console.log("I can access outer variables:", nr);
-  }
-}
-
-doOuterFunctionStuff(2);
-
-function doOuterFunctionStuff(nr) {
-  doInnerFunctionStuff(nr);
-  function doInnerFunctionStuff(x) {
-    let z = 10;
-  }
-  console.log("Not accessible:", z);
-}
-
-doOuterFunctionStuff(2);
-
-function doOuterFunctionStuff(nr) {
-  doInnerFunctionStuff(nr);
-  function doInnerFunctionStuff(x) {
-    let z = 10;
-  }
-}
-
-doInnerFunctionStuff(3);
-
-let youGotThis = function () {
-  console.log("You're doing really well, keep coding!");
-};
-
-setTimeout(youGotThis, 1000);
-setInterval(youGotThis, 1000);
diff --git a/Chapter 8/Code Samples/ch8_arrays.js b/Chapter 8/Code Samples/ch8_arrays.js
new file mode 100644
index 0000000..d650cc5
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_arrays.js	
@@ -0,0 +1,41 @@
+let arr = ["grapefruit", 4, "hello", 5.6, true];
+function printStuff(element, index) {
+    console.log("Printing stuff:", element, "on array position:", index);
+}
+
+let arr = ["squirrel", 5, "Tjed", new Date(), true];
+function checkString(element, index) {
+return typeof element === "string";
+}
+let filterArr = arr.filter(checkString);
+console.log(filterArr);
+
+console.log(arr.every(checkString));
+
+arr = ["grapefruit", 4, "hello", 5.6, true];
+arr.copyWithin(0, 3, 4);
+
+arr = ["grapefruit", 4, "hello", 5.6, true];
+arr.copyWithin(0, 3, 5);
+
+let arr = ["grapefruit", 4, "hello", 5.6, true, false];
+arr.copyWithin(0, 3);
+console.log(arr);
+
+let arr = [1, 2, 3, 4];
+let mapped_arr = arr.map(x => x + 1);
+console.log(mapped_arr);
+
+let bb = ["so", "bye", "bye", "love"];
+console.log(bb.lastIndexOf("bye"));
+
+let bb = ["so", "bye", "bye", "love"];
+console.log(bb.lastIndexOf("hi"));
+
+let letters = ["a", "b", "c"];
+let x = letters.join();
+console.log(x);
+
+let letters = ["a", "b", "c"];
+let x = letters.join('-');
+console.log(x);
\ No newline at end of file
diff --git a/Chapter 8/Code Samples/ch8_dates.js b/Chapter 8/Code Samples/ch8_dates.js
new file mode 100644
index 0000000..e8c1483
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_dates.js	
@@ -0,0 +1,50 @@
+let currentDateTime = new Date();
+console.log(currentDateTime);
+
+let now2 = Date.now();
+console.log(now2);
+
+let milliDate = new Date(1000);
+console.log(milliDate);
+
+let stringDate = new Date("Sat Jun 05 2021 12:40:12 GMT+0200");
+console.log(stringDate);
+
+let specificDate = new Date(2022, 1, 10, 12, 10, 15, 100);
+console.log(specificDate);
+
+let d = new Date();
+console.log("Day of week:", d.getDay());
+console.log("Day of month:", d.getDate());
+console.log("Month:", d.getMonth());
+console.log("Year:", d.getFullYear());
+console.log("Seconds:", d.getSeconds());
+console.log("Milliseconds:", d.getMilliseconds());
+console.log("Time:", d.getTime());
+
+d.setFullYear(2010);
+console.log(d);
+
+d.setMonth(9);
+console.log(d);
+
+d.setDate(10);
+console.log(d);
+
+d.setHours(10);
+console.log(d);
+
+d.setTime(1622889770682);
+console.log(d);
+
+let d1 = Date.parse("June 5, 2021");
+console.log(d1);
+
+let d2 = Date.parse("6/5/2021");
+console.log(d2);
+
+console.log(d.toDateString());
+
+console.log(d.toLocaleDateString());
+
+
diff --git a/Chapter 8/Code Samples/ch8_decode_encode.js b/Chapter 8/Code Samples/ch8_decode_encode.js
new file mode 100644
index 0000000..cb9ec14
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_decode_encode.js	
@@ -0,0 +1,12 @@
+let uri = "https://www.example.com/submit?name=maaike van putten";
+let encoded_uri = encodeURI(uri);
+console.log("Encoded:", encoded_uri);
+let decoded_uri = decodeURI(encoded_uri);
+console.log("Decoded:", decoded_uri);
+
+let uri = "https://www.example.com/submit?name=maaike van putten";
+let encoded_uri = encodeURIComponent(uri);
+console.log("Encoded:", encoded_uri);
+let decoded_uri = decodeURIComponent(encoded_uri);
+console.log("Decoded:", decoded_uri);
+
diff --git a/Chapter 8/Code Samples/ch8_eval.html b/Chapter 8/Code Samples/ch8_eval.html
new file mode 100644
index 0000000..972a1a7
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_eval.html	
@@ -0,0 +1,12 @@
+<html>
+
+<body>
+    <input onchange="go(this)"></input>
+    <script>
+        function go(e) {
+            eval(e.value);
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Chapter 8/Code Samples/ch8_examples.js b/Chapter 8/Code Samples/ch8_examples.js
new file mode 100644
index 0000000..73f56a8
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_examples.js	
@@ -0,0 +1,7 @@
+let s = "Hello";
+console.log(
+    s.concat(" there!")
+        .toUpperCase()
+        .replace("THERE", "you")
+        .concat(" You're amazing!")
+);
\ No newline at end of file
diff --git a/Chapter 8/Code Samples/ch8_global_nan.js b/Chapter 8/Code Samples/ch8_global_nan.js
new file mode 100644
index 0000000..219cac8
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_global_nan.js	
@@ -0,0 +1,3 @@
+let x = 7;
+console.log(Number.isNaN(x));
+console.log(isNaN(x));
diff --git a/Chapter 8/Code Samples/ch8_math.js b/Chapter 8/Code Samples/ch8_math.js
new file mode 100644
index 0000000..47f4ea4
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_math.js	
@@ -0,0 +1,43 @@
+let highest = Math.max(2, 56, 12, 1, 233, 4);
+console.log(highest);
+
+let lowest = Math.min(2, 56, 12, 1, 233, 4);
+console.log(lowest);
+
+let highestOfWords = Math.max("hi", 3, "bye");
+console.log(highestOfWords);
+
+let result = Math.sqrt(64);
+console.log(result);
+
+let result2 = Math.pow(5, 3);
+console.log(result2);
+
+let x = 6.78;
+let y = 5.34;
+console.log("X:", x, "becomes", Math.round(x));
+console.log("Y:", y, "becomes", Math.round(y));
+
+console.log("X:", x, "becomes", Math.ceil(x));
+console.log("Y:", y, "becomes", Math.ceil(y));
+
+let negativeX = -x;
+let negativeY = -y;
+console.log("negativeX:", negativeX, "becomes", Math.ceil(negativeX));
+console.log("negativeY:", negativeY, "becomes", Math.ceil(negativeY));
+
+console.log("X:", x, "becomes", Math.floor(x));
+console.log("Y:", y, "becomes", Math.floor(y));
+
+console.log("negativeX:", negativeX, "becomes", Math.floor(negativeX));
+console.log("negativeY:", negativeY, "becomes", Math.floor(negativeY));
+
+console.log("X:", x, "becomes", Math.trunc(x));
+console.log("Y:", y, "becomes", Math.trunc(y));
+
+let x = 2;
+let exp = Math.exp(x);
+console.log("Exp:", exp);
+let log = Math.log(exp);
+console.log("Log:", log);
+
diff --git a/Chapter 8/Code Samples/ch8_numbers.js b/Chapter 8/Code Samples/ch8_numbers.js
new file mode 100644
index 0000000..463dbd4
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_numbers.js	
@@ -0,0 +1,36 @@
+let x = 34;
+console.log(isNaN(x));
+console.log(!isNaN(x));
+let str = "hi";
+console.log(isNaN(str));
+
+let str1 = "5";
+console.log(isNaN(str1));
+
+let x = 3;
+let str = "finite";
+console.log(isFinite(x));
+console.log(isFinite(str));
+console.log(isFinite(Infinity));
+console.log(isFinite(10 / 0));
+
+let x = 3;
+let str = "integer";
+console.log(Number.isInteger(x));
+console.log(Number.isInteger(str));
+console.log(Number.isInteger(Infinity));
+console.log(Number.isInteger(2.4));
+
+let x = 1.23456;
+let newX = x.toFixed(2);
+
+let x = 1.23456;
+let newX = x.toFixed(3);
+console.log(x, newX);
+
+let x = 1.23456;
+let newX = x.toPrecision(2);
+
+let x = 1.23456;
+let newX = x.toPrecision(4);
+console.log(newX)
\ No newline at end of file
diff --git a/Chapter 8/Code Samples/ch8_parsing.js b/Chapter 8/Code Samples/ch8_parsing.js
new file mode 100644
index 0000000..5eddc50
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_parsing.js	
@@ -0,0 +1,36 @@
+let str_int = "6";
+let int_int = parseInt(str_int);
+console.log("Type of ", int_int, "is", typeof int_int);
+
+
+let str_float = "7.6";
+let int_float = parseInt(str_float);
+console.log("Type of", int_float, "is", typeof int_float);
+
+let str_binary = "0b101";
+let int_binary = parseInt(str_binary);
+console.log("Type of", int_binary, "is", typeof int_binary);
+
+let str_nan = "hello!";
+let int_nan = parseInt(str_nan);
+console.log("Type of", int_nan, "is", typeof int_nan);
+
+let str_float = "7.6";
+let float_float = parseFloat(str_float);
+console.log("Type of", float_float, "is", typeof float_float);
+
+let str_version_nr = "2.3.4";
+let float_version_nr = parseFloat(str_version_nr);
+console.log("Type of", float_version_nr, "is", typeof float_version_nr);
+
+let str_int = "6";
+let float_int = parseFloat(str_int);
+console.log("Type of", float_int, "is", typeof float_int);
+
+let str_binary = "0b101";
+let float_binary = parseFloat(str_binary);
+console.log("Type of", float_binary, "is", typeof float_binary);
+
+let str_nan = "hello!";
+let float_nan = parseFloat(str_nan);
+console.log("Type of", float_nan, "is", typeof float_nan);
\ No newline at end of file
diff --git a/Chapter 8/Code Samples/ch8_strings.js b/Chapter 8/Code Samples/ch8_strings.js
new file mode 100644
index 0000000..14b9099
--- /dev/null
+++ b/Chapter 8/Code Samples/ch8_strings.js	
@@ -0,0 +1,95 @@
+let s1 = "Hello ";
+let s2 = "JavaScript";
+let result = s1.concat(s2);
+console.log(result);
+
+let result = "Hello JavaScript";
+let arr_result = result.split(" ");
+console.log(arr_result);
+
+let favoriteFruits = "strawberry,watermelon,grapefruit";
+let arr_fruits = favoriteFruits.split(",");
+console.log(arr_fruits);
+
+let letters = ["a", "b", "c"];
+let x = letters.join();
+console.log(x);
+
+let letters = ["a", "b", "c"];
+let x = letters.join('-');
+console.log(x);
+
+let poem = "Roses are red, violets are blue, if I can do JS, then you can too!";
+let index_re = poem.indexOf("re");
+console.log(index_re);
+
+let indexNotFound = poem.indexOf("python");
+console.log(indexNotFound);
+
+if (poem.indexOf("python") != -1) {
+    // do stuff
+}
+
+let searchStr = "When I see my fellow, I say hello";
+let pos = searchStr.search("lo");
+console.log(pos);
+
+let notFound = searchStr.search("JavaScript");
+console.log(notFound);
+
+let lastIndex_re = poem.lastIndexOf("re");
+console.log(lastIndex_re);
+
+let pos1 = poem.charAt(10);
+console.log(pos1);
+
+let pos2 = poem.charAt(1000);
+console.log(pos2);
+
+let str = "Create a substring";
+let substr1 = str.slice(5);
+let substr2 = str.slice(0,3);
+console.log("1:", substr1);
+console.log("2:", substr2);
+
+let hi = "Hi buddy";
+let new_hi = hi.replace("buddy", "Pascal");
+console.log(new_hi);
+
+let new_hi2 = hi.replace("not there", "never there");
+console.log(new_hi2);
+
+let s3 = "hello hello";
+let new_s3 = s3.replace("hello", "oh");
+console.log(new_s3);
+
+let s3 = "hello hello";
+let new_s3 = s3.replaceAll("hello", "oh");
+console.log(new_s3);
+
+let low_bye = "bye!";
+let up_bye = low_bye.toUpperCase();
+console.log(up_bye);
+
+let caps = "HI HOW ARE YOU?";
+let fixed_caps = caps.toLowerCase();
+console.log(fixed_caps);
+
+let caps = "HI HOW ARE YOU?";
+let fixed_caps = caps.toLowerCase();
+let first_capital = fixed_caps.charAt(0).toUpperCase().concat(fixed_caps.slice(1));
+console.log(first_capital);
+
+let encouragement = "You are doing great, keep up the good work!";
+let bool_start = encouragement.startsWith("You");
+console.log(bool_start);
+
+let bool_start2 = encouragement.startsWith("you");
+console.log(bool_start2);
+
+let bool_start3 = encouragement.toLowerCase().startsWith("you");
+console.log(bool_start3);
+
+let bool_end = encouragement.endsWith("Something else");
+console.log(bool_end);
+

From 0dcc3057c8fb1924dd8cf6b50a6aa8bdcffd94e8 Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Thu, 2 Dec 2021 12:29:25 +0100
Subject: [PATCH 8/9] rename file

---
 Chapter 1/Code Samples/{ch1_alert_and_prompt.js => ch1_alert.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename Chapter 1/Code Samples/{ch1_alert_and_prompt.js => ch1_alert.js} (100%)

diff --git a/Chapter 1/Code Samples/ch1_alert_and_prompt.js b/Chapter 1/Code Samples/ch1_alert.js
similarity index 100%
rename from Chapter 1/Code Samples/ch1_alert_and_prompt.js
rename to Chapter 1/Code Samples/ch1_alert.js

From a870f9ef4fe97ffdf8ff010a1cae423a58cca45f Mon Sep 17 00:00:00 2001
From: brightboost <info@brightboost.nl>
Date: Thu, 2 Dec 2021 21:10:07 +0100
Subject: [PATCH 9/9] final updates

---
 .../Code Samples/ch14-canvas-upload-image.html   |   0
 Chapter 14/Code Samples/flower.jpg               | Bin 0 -> 4892 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 Chapter 14/Code Samples/ch14-canvas-upload-image.html
 create mode 100644 Chapter 14/Code Samples/flower.jpg

diff --git a/Chapter 14/Code Samples/ch14-canvas-upload-image.html b/Chapter 14/Code Samples/ch14-canvas-upload-image.html
deleted file mode 100644
index e69de29..0000000
diff --git a/Chapter 14/Code Samples/flower.jpg b/Chapter 14/Code Samples/flower.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a70e2b48a4d787d28af584db9cfb4ec033cd8a98
GIT binary patch
literal 4892
zcmeHKeN<Cr7=JJOf{Q8RTg<~0@eXS23y`gCfH)8hJ0hBuns?g;mSdZDcW&S@j~RZY
zPAc&$70m>zQ%4JpK*{_{`$Q{1vO*L|P4NTFuhx6-=75fWL>>E!_iXn*?|Yx;_rAa1
z^SpmN?k0CDsM9))`2b{R#{+)=02c%!EPz0Z{zoAk<~<GC!@Tw^XbZhQe$Wo_>+v@(
zWi$Q|kQuY#lg4@Q<^r&W2iR~$B9lsxGLMZw1W@5!mr5i^g$L2?2EebvgD8YCtX?*p
z0(a|UZG{wNRf@%CTLNyd=!gWprAX|=tzv0{L=04^PAjgTLr?-8QD8Kyv8%Q9n80XI
zW6vh#NOG(hM4@qf2}w*TnUtq5nWI-2uv87Iaw?rg)*^z!1<oRq*`{==F$P=-ZF*UZ
zK_}9Xugo2n>2-lKHRe5w!{JD9$P+ANfmo_gD8v$(SSAxe50S0dOyN$E*%kv4PyvH6
zj<D%Tqm?pR%mNw{*IDe88pBY57doAyNTbe&PBUdz>~sjj7dO}#z7SL(P<i~7=>{7;
z^=vYQn9EE&Gn0|o$%>OUBCps=sIgqaX0elcf<d5zydW7Qfm4J*BZKJ@N#ReS694TJ
zy+==g)=6a>G$|=5io|5OTx8HE6QV=|ks`vA3B8EO*GUs~gjAlGnBoKSg!F~U)IpRa
zS&}R{Ng+*?j!`6~NPGdz$G-k~7Q4QXrlOJg+<Mj+UzM0v*JSjF!c4rX_#!-#c^rGC
z<)5d@p!cQ8Y9~!h2^jQZ!bB7iW{OUdl&&2pmqD+jjFgG!Nm06q>YE~1drA{-E>L4m
zk%7p^?IsG-<eMxGf_w-UZ@5a_3;91VvG%IxK6eX#fHdS@8gQmew^M}{Qj>$@#yNyw
zf=b+L5!N`P^uJOQUP7Ooea`UUetV>ZZc3(3Eo7d>V$x*b=6SeE{P*RD9>sGyc#YwO
z7W=NfCl5?rKf;Hnf*;`qH1xnG{StUUt^v9Fr9i)&2dZm8u6`-dFXw^k8j!1B3iQkQ
z|EaE?hK(@8F3kbkF?S2d09-bQ%VBf594?Q?^+$tHG#~&C9Xw=EP()~CWJG9qc+~LN
z=%`^akB5f~o)pB4#^U1RhDM7dBB3N!7$>Ab5FU?*`lBHz8X}Aej}rEKxIY7Ye;@=x
z7BUj}@evjuaUTZJu*2mb%%FQxdcb}bo|oqzfCfT`>LB2UuvmU<7Kg)ztuL~G?swUI
zPVfk6IyYo8&Ko&5RJN#Wn}5vM-3P;R8#+hHb>u4nXm~{A(5Tqam@qCrF)4XWib9z&
zPMeuEK6}EHys6Wko&MbOde|2f6dGT$QTBNbXK~5mS4)>HUABD1>u<cdwtU_C4I8(=
zz2lvol~udm-Sg4M)qD4SQuFEOhYlY(dhCniCr+OF{)ZnMo0?Czo^3mKzWqYSZx^p!
zzj3px`_><~@6fyu!1B<7&xi8jLtcJtHjB-pc_DrdnmC`$86o8cr%&eLb3;bT7Ws#c
zE!(#HU_gvKw=+yfHlX375?f=h(bO1b|BTox|B9K9SP!q$U=Ry|$z$<BD!8-ry^9fR
znx=p2AY1U#z?$wbSKF$wZIiy+GBGo5)asa@l~w9v^<n24$H=Se8mbT1=FfDk8x^!*
zVblq`f>Nsnzwl&U@m0dM!wpJzrMAfLZ-{PoP&bBbaGl?H^Ni;Du)C27zi*=C0!nlA
zKtA&Iu{T^>9najjI#XNy)g`v{{p-KKYH|%u10^pjJ}8-b{=?+TeXEZPtE2HNe`0kF
zGu&WNSKz9wvCkzm)s@v|)pgB&YU?*EE>F66;lvL+f6F;|Wx1+gAzs-L5qz<1XoX3z
z%sSJRHpDWc`-pSqmCBG4N1w=D-eM~kEZo0nR^v5R`lc7Zt9vbXdwU#v_mY%BX@ZsA
zzc#);gm($u^JOs+TU`fgkB^9KJGCW;JgfNW{qm(J&)E)5*>OI1+S=~=j>5qG(SPzc
z-;KGOwRY7f_uKE4bY1%8WX+|VoM3Ii-og7j4+p3I-2UN$_0;L)1!w9nx7{n=m9^Nu
zT)$-gu*{l$Z<(_)qpPsRv&<3f&bpuWknN7fZI?6i;zqwaq4CPMc;~cj`l^ng?49Fg
zm&#W06~aSRSpAF(2MViHtcovN?+1SIDKSP?Q=V2iA{!uE?x9b#l-{0tOA`@V@!rJd
z+M{=d$7aoCJCd(w$d;_u#(#E;yCQyN$lj{6u0tIMPL(ahns01AF#U|{=?h&)=9TZg
mcDhB&M#F{Q$Gg&m+uzY<=}Ve6R-c?2J3qKV8<xp)H~$6FOoT`P

literal 0
HcmV?d00001