reorganizing

2021-12-02 21:21:10 +01:00 · 2021-12-02 21:21:10 +01:00 · 67a8d8a7a0
commit 67a8d8a7a0
parent 711a22a7c0 a870f9ef4f
125 changed files with 4052 additions and 1 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/01/.DS_Store
+++ b/01/.DS_Store
--- a/naming_convention.txt
+++ b/naming_convention.txt
@ -1 +0,0 @@
-
--- a/Samples/ch1_alert.js
+++ b/Samples/ch1_alert.js
@ -0,0 +1,2 @@
+//alert("Saying hi from a different file!");
+prompt("Hi! How are you?");
--- a/Samples/ch1_popup1_hithere.html
+++ b/Samples/ch1_popup1_hithere.html
@ -0,0 +1,5 @@
+<html>
+  <script type="text/javascript">
+    alert("Hi there!");
+  </script>
+</html>
--- a/Samples/ch1_popup2_prompt.html
+++ b/Samples/ch1_popup2_prompt.html
@ -0,0 +1,3 @@
+<html>
+  <script type="text/javascript" src="ch1_alert.js"></script>
+</html>
--- a/Samples/ch1_welcome_new_scared.js
+++ b/Samples/ch1_welcome_new_scared.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!");
+}
+
--- a/Samples/ch2_boolean_and_comparison.js
+++ b/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);
--- a/Samples/ch2_calculations_conversions.js
+++ b/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));
--- a/Samples/ch2_strings_and_types.js
+++ b/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);
--- a/Samples/ch2_types_and_operations.js
+++ b/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++);
--- a/Samples/ch2_undefined_null.js
+++ b/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;
--- a/Samples/ch2_variables_basics.js
+++ b/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;
--- a/Samples/ch2_variables_number.js
+++ b/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;
--- a/Samples/ch2_variables_string.js
+++ b/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);
--- a/Samples/ch3_arrays.js
+++ b/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);
--- a/Samples/ch3_objects.js
+++ b/Samples/ch3_objects.js
@ -0,0 +1,80 @@
+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 
+                  };
--- a/Samples/ch4_if.js
+++ b/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");
--- a/Samples/ch4_switch.js
+++ b/Samples/ch4_switch.js
@ -0,0 +1,121 @@
+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.");
+}
--- a/Samples/ch5_break_continue_nested.js
+++ b/Samples/ch5_break_continue_nested.js
@ -0,0 +1,108 @@
+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;
+    }
+  }
+}
--- a/Samples/ch5_do_while.js
+++ b/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));
--- a/Samples/ch5_for.js
+++ b/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);
--- a/Samples/ch5_for_in_for_of.js
+++ b/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",
+  },
+];
--- a/Samples/ch5_while.js
+++ b/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);
--- a/Samples/ch6_anonymous_nested_callbacks.js
+++ b/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);
--- a/Samples/ch6_functions_params.js
+++ b/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);
--- a/Samples/ch6_recursion.js
+++ b/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);
+  }
+}
--- a/Samples/ch6_scope.js
+++ b/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);
--- a/Samples/ch7_classes.js
+++ b/Samples/ch7_classes.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();
+
--- a/Samples/ch7_helloweb.html
+++ b/Samples/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>
--- a/Samples/ch7_html.html
+++ b/Samples/ch7_html.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>
--- a/Samples/ch8_arrays.js
+++ b/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);
--- a/Samples/ch8_dates.js
+++ b/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());
+
+
--- a/Samples/ch8_decode_encode.js
+++ b/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);
+
--- a/Samples/ch8_eval.html
+++ b/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>
--- a/Samples/ch8_examples.js
+++ b/Samples/ch8_examples.js
@ -0,0 +1,7 @@
+let s = "Hello";
+console.log(
+    s.concat(" there!")
+        .toUpperCase()
+        .replace("THERE", "you")
+        .concat(" You're amazing!")
+);
--- a/Samples/ch8_global_nan.js
+++ b/Samples/ch8_global_nan.js
@ -0,0 +1,3 @@
+let x = 7;
+console.log(Number.isNaN(x));
+console.log(isNaN(x));
--- a/Samples/ch8_math.js
+++ b/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);
+
--- a/Samples/ch8_numbers.js
+++ b/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)
--- a/Samples/ch8_parsing.js
+++ b/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);
--- a/Samples/ch8_strings.js
+++ b/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);
+
--- a/Samples/ch9-accessing.html
+++ b/Samples/ch9-accessing.html
@ -0,0 +1,11 @@
+<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>
+  <script>
+    console.log(document.getElementById("two"));
+  </script>
+</html>
--- a/Samples/ch9-attributes.html
+++ b/Samples/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>
--- a/Samples/ch9-classes.html
+++ b/Samples/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>
--- a/Samples/ch9-classes2.html
+++ b/Samples/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>
--- a/Samples/ch9-classes3.html
+++ b/Samples/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>
--- a/Samples/ch9-click.html
+++ b/Samples/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>
--- a/Samples/ch9-colors.html
+++ b/Samples/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>
--- a/Samples/ch9-domflow.html
+++ b/Samples/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);
+      }
+    </script>
+  </body>
+</html>
--- a/Samples/ch9-event-listener.html
+++ b/Samples/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>
--- a/Samples/ch9-new-element.html
+++ b/Samples/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>
--- a/Samples/ch9-selectionelements.html
+++ b/Samples/ch9-selectionelements.html
@ -0,0 +1,8 @@
+<html>
+  <body>
+    <h1>Welcome page</h1>
+    <p id="greeting">
+      Hi!
+    </p>
+  </body>
+</html>
--- a/Samples/ch9-this.html
+++ b/Samples/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>
--- a/Samples/ch9-toggle-visibility.html
+++ b/Samples/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>
--- a/Samples/ch9-treasure.html
+++ b/Samples/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>
--- a/Samples/ch10-animate.html
+++ b/Samples/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>
--- a/Samples/ch10-dragdrop.html
+++ b/Samples/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>
--- a/Samples/ch10-eventtarget.html
+++ b/Samples/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>
--- a/Samples/ch10-formcontent.html
+++ b/Samples/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>
--- a/Samples/ch10-formsubmit.html
+++ b/Samples/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>
--- a/Samples/ch10-formsubmitreturn.html
+++ b/Samples/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>
--- a/Samples/ch10-keyevent.html
+++ b/Samples/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>
--- a/Samples/ch10-keyeventreturn.html
+++ b/Samples/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>
--- a/Samples/ch10-mouseevents.html
+++ b/Samples/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>
--- a/Samples/ch10-mouseevents2.html
+++ b/Samples/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>
--- a/Samples/ch10-onchang-onblur.html
+++ b/Samples/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>
--- a/Samples/ch10-specifyingevents.html
+++ b/Samples/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>
--- a/Samples/ch11-evileval.html
+++ b/Samples/ch11-evileval.html
@ -0,0 +1,10 @@
+<html>
+  <body>
+    <input onchange="go(this)"></input>
+    <script>
+      function go(e) {
+        eval(e.value);
+      }
+    </script>
+  </body>
+</html>
--- a/Samples/ch11.js
+++ b/Samples/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
--- a/Samples/ch12.js
+++ b/Samples/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!");
+}
--- a/Samples/ch12_complex.json
+++ b/Samples/ch12_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"
+                }
+            ]
+        }
+    ]
+}
--- a/Samples/ch12_cookie.html
+++ b/Samples/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>
--- a/Samples/ch12_parsing.js
+++ b/Samples/ch12_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);
--- a/Samples/ch12_storage.html
+++ b/Samples/ch12_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>
--- a/Samples/ch13_asyncawait.js
+++ b/Samples/ch13_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);
--- a/Samples/ch13_callbacks.js
+++ b/Samples/ch13_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)
--- a/Samples/ch13_chainedpromises.js
+++ b/Samples/ch13_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);
+    })
--- a/Samples/ch13_eventloop-async.js
+++ b/Samples/ch13_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;
+}
--- a/Samples/ch13_eventloop-sync.js
+++ b/Samples/ch13_eventloop-sync.js
@ -0,0 +1,6 @@
+console.log("Hi there");
+add(4,5);
+
+function add(x, y) {
+    return x + y;
+}
--- a/Samples/ch13_promises.js
+++ b/Samples/ch13_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)
+    }
+);
--- a/Samples/ch14-browser-supporting-file-reader.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-animation.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-circle.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-draw-mouse.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-drawing-canvas.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-lines.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-save-image.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-saving-image.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas-text.html
+++ b/Samples/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>
--- a/Samples/ch14-canvas.html
+++ b/Samples/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>
--- a/Samples/ch14-drawing-image.html
+++ b/Samples/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>
--- a/Samples/ch14-geo-getlocation.html
+++ b/Samples/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>
--- a/Samples/ch14-inspect-geo.html
+++ b/Samples/ch14-inspect-geo.html
@ -0,0 +1,11 @@
+<html>
+  <body>
+    <script>
+      window.onload = init;
+
+      function init() {
+        console.dir(navigator.geolocation);
+      }
+    </script>
+  </body>
+</html>
--- a/Samples/ch14-localstorage.html
+++ b/Samples/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>
--- a/Samples/ch14-media.html
+++ b/Samples/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>
--- a/Samples/ch14-reading-file.html
+++ b/Samples/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>
--- a/Samples/ch14-upload-file.html
+++ b/Samples/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>
--- a/Samples/ch14-upload-files.html
+++ b/Samples/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>
--- a/Samples/ch14.js
+++ b/Samples/ch14.js
@ -0,0 +1,6 @@
+let varContainingFunction = function () {
+  let varInFunction = "I'm in a function.";
+  console.log("hi there!");
+};
+
+varContainingFunction();
--- a/Samples/flower.jpg
+++ b/Samples/flower.jpg
--- a/Show More
+++ b/Show More