reorganizing

2021-12-02 21:21:10 +01:00
parent 711a22a7c0 a870f9ef4f
commit 67a8d8a7a0
125 changed files with 4052 additions and 1 deletions
@@ -1 +0,0 @@
@@ -0,0 +1,2 @@
 //alert("Saying hi from a different file!");
 prompt("Hi! How are you?");
@@ -0,0 +1,5 @@
 <html>
  <script type="text/javascript">
    alert("Hi there!");
  </script>
 </html>
@@ -0,0 +1,3 @@
 <html>
  <script type="text/javascript" src="ch1_alert.js"></script>
 </html>
@@ -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!");
 }
@@ -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);
@@ -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));
@@ -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);
@@ -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++);
@@ -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;
@@ -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;
@@ -0,0 +1,7 @@
 let intNr = 1;
 let decNr = 1.5;
 let expNr = 1.4e15;
 let bigNr = 90071992547409920n;
 // typeError
 let result = bigNr + intNr;
@@ -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);
@@ -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);
@@ -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 
                  };
@@ -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");
@@ -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.");
 }
@@ -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;
    }
  }
 }
@@ -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));
@@ -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);
@@ -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",
  },
 ];
@@ -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);
@@ -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);
@@ -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);
@@ -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);
  }
 }
@@ -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);
@@ -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();
@@ -0,0 +1,9 @@
 <!DOCTYPE html>
 <html>
  <head>
    <title>Tab in the browser</title>
  </head>
  <body>
    <p>Hello web!</p>
  </body>
 </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>
@@ -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);
@@ -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());
@@ -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);
@@ -0,0 +1,12 @@
 <html>
 <body>
    <input onchange="go(this)"></input>
    <script>
        function go(e) {
            eval(e.value);
        }
    </script>
 </body>
 </html>
@@ -0,0 +1,7 @@
 let s = "Hello";
 console.log(
    s.concat(" there!")
        .toUpperCase()
        .replace("THERE", "you")
        .concat(" You're amazing!")
 );
@@ -0,0 +1,3 @@
 let x = 7;
 console.log(Number.isNaN(x));
 console.log(isNaN(x));
@@ -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);
@@ -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)
@@ -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);
@@ -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);
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,8 @@
 <html>
  <body>
    <h1>Welcome page</h1>
    <p id="greeting">
      Hi!
    </p>
  </body>
 </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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,10 @@
 <html>
  <body>
    <button type="button" onclick="triggerSomething()">Click</button>
    <script>
      function triggerSomething() {
        console.dir(event.target);
      }
    </script>
  </body>
 </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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,10 @@
 <html>
  <body>
    <input onchange="go(this)"></input>
    <script>
      function go(e) {
        eval(e.value);
      }
    </script>
  </body>
 </html>
@@ -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
@@ -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!");
 }
@@ -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"
                }
            ]
        }
    ]
 }
@@ -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>
@@ -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);
@@ -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>
@@ -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);
@@ -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)
@@ -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);
    })
@@ -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;
 }
@@ -0,0 +1,6 @@
 console.log("Hi there");
 add(4,5);
 function add(x, y) {
    return x + y;
 }
@@ -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)
    }
 );
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,11 @@
 <html>
  <body>
    <script>
      window.onload = init;
      function init() {
        console.dir(navigator.geolocation);
      }
    </script>
  </body>
 </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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,6 @@
 let varContainingFunction = function () {
  let varInFunction = "I'm in a function.";
  console.log("hi there!");
 };
 varContainingFunction();
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1,2 @@`
							`//alert("Saying hi from a different file!");`
							`prompt("Hi! How are you?");`