JS.js

// JAVASCRIPT - Page Behavior - by Beumsk

    
    
// To create a comment. Shown in code only. Indent 2spaces
/* Multiple line comment */


// TODO: --> best practice to indicate things to do in the code

// FIXME: --> best practice to indicate things to fix in the code


// MAIN JS - main syntax

  // Variable
  var a = "example"; 
  console.log(a); // example

  // Function; also var example = function() {};
  function example(num) { // num is the function parameter
    // code block;
    console.log(num * num);
  }
  example(5); // run the function -> 25 (5 is the function argument)

  // Double arg Function (also called currying)
  function say(arg1) {
    return function(arg2) {
      return arg1 + " " + arg2;
    }
  }
  say("hello")("world"); // hello world

  // Infinite currying
  function add(a) {
    return function(b) {
      if (b) return add(a+b);
      return a;
    }
  }
  console.log(add(2)(3)(4)(8)()); // 2+3+4+8=17

  // IIFE (Immediately Invoked Function Expression) -> doesn't need to be called to run
  (function example(text) {
    console.log(text);
  })("hellow world");

  // Callback function
  function greeting(name) {
    console.log('Hello ' + name);
  }
  function processGreeting(name, callback) {
    callback(name);
  }
  processGreeting('you', greeting); // Hello you


  // Array (careful!-> if variable is set equal to another array, they will be linked and influence each other)
  var numbers = [one, two, three]; 
  console.log(numbers[0]); // 'one'
  console.log(numbers[0], numbers[1]); // 'one two'

  // Object
  var dog = {
    name: "Rex", 
    race: "Pitbul", 
    age: "6"
  }; 
  console.log(dog.name); // Rex
  console.log(dog["name"]); // Rex

  // Condition
  if (a === 1) {
    // code block;
  } else if (a === 2) {
    // code block;
  } else {
    // code block;
  }

  // Ternary operator
  var a = (b > 10) ? "Over ten" : "Under ten"; // if b > 10, a value will become "Over ten"; otherwise, "Under ten"

  // Short circuiting
  var a = true && true; // returns true
  var a = true && false; // returns false
  var a = false || false; // returns false
  var a = true || false; // returns true

  // Switch condition
  switch (a) {
    case 1:
    // code block;
      break;
    case 2:
    case 3:
    // code block;
      break;
    default:
    // code block;
  }

  // While loop
  while (a == 1) {
    // code block;
  } 

  // Do while loop; Will execute code block at least once
  do {
    // code block;
  } while (false); 

  // For loop
  for (i = 0; i < a.length; i++) {
    // code block;
  } 

  // ForEach loop from an array
  a.forEach(function(item) {
    // code block;
  }); 


// DOM syntax

  document.getElementsByTagNamegName("tag"); // will return tag elements as an array
  document.getElementsByClassName("class"); // will return .class elements as an array
  document.getElementById("id"); // will return #id element
  document.querySelector("tag"); // will return first tag of document; selection similar to css (or jquery)
  document.querySelectorAll("tag"); // will return all tags as an array; Note that it isn't updated live as other selectors are

  document.getElementById("id").setAttribute("src", "www.site.com"); // set/change attribute; can often be written something.src("change");
  document.getElementById("id").innerHTML = "some text"; // change #id content
  document.getElementById("id").textContent = "some text"; // similar to innerHTML without tag understanding; can use += to add some text
  document.getElementById("id").style.backgroundColor = "red"; // change style of background-color; everything is camelCased
  document.getElementById("id").classList.add("class"); // add a class

  var newDiv = document.createElement("div"); newDiv.innerHTML = "text"; document.body.appendChild(newDiv); // create div, add content and append to body
  document.body.removeChild(newDiv); // remove newDiv
  document.replaceChild(newDiv, otherDiv); // replace newDiv wth otherDiv

  newDiv.addEventListener("click", function () {/*code block;*/}); // new event click
  newDiv.removeEventListener("click", namedFunction); // remove event click
  newDiv.addEventListener("click", function once() {this.removeEventListener("click", once)}); // event click only once

  setTimeout(function (){/*code block;*/}, 1000); // run code after 1sec
  var timeout = setTimeout(func, 1000); clearTimeout(timeout); // timeout is set and then cleared
  setInterval(function (){/*code block;*/}, 1000); // run code every 1sec
  var interval = setInterval(func, 1000); clearInterval(interval); // interval is set and then cleared

  document.querySelector("form").addEventListener("submit", function (e) {e.PreventDefault();}); // prevent default (submit and refresh)
  document.querySelector(".item").addEventListener("click", someFunc); function someFunc(e) {e.target.style.color = "red"} // targets clicked element 

  JSON.stringify(objectJS); // JS objects array into JSON string
  JSON.parse(stringJSON); // JSON string into JS objects array




// CONSOLELOG
// show something in js console


  console.log("Text"); // Text

  console.log("up \n down"); // \n acts like enter

  console.log("\' \" \\ "); // to use those tricky characters

  console.log(3 + 4 - 1 * 4 / 2); // process and give answer

  console.log(10 % 3); // show the rest of division -> it is called modulo

  console.log("hel" + "lo"); // show addition of the two strings "bonjour"

  console.log("hello", "you"); // show both strings with a space between "hello you"

  console.log(isNaN(10)); // returns false (true if it is actually NotaNumber)

  console.log(typeof "string"); // can return number, boolean, string, function, object (array return object in JS)

  console.warn("Warning"); // display some content as a warning message

  console.assert(2 == 2); // returns undefined if true and returns detailed error when false

  console.table(["apples", "oranges", "bananas"]); // returns a nice table with index and values; works with objects as well !!IE

  console.count(); // returns the number of time this particular call to count() has been called

  console.trace(); // returns a stack trace to the console

  console.log("%cStyled!", "font-weight: 800; color: red; font-size: 3rem;"); // style your log with some CSS




// ERRORS 
// error example -> ReferenceError: not defined; ends the work of JS (the code afterwards will never be processed)




// STRICT MODE 
// the strict mode changes bad syntax into actual errors; helping writing secure JS


  // usage of strict mode; must be placed on top of code (or function)
  "use strict";
  x = 3; // not allowed; you must declare every variables




// TYPES 
// Check types of elements;


  // Typeof the main type checker

  typeof 27; // number

  typeof 27_000; // number; using numeric separator for big figures

  typeof NaN; // number; weird i know

  typeof "Hello"; // string

  typeof (typeof 1); // string; typeof always returns a string

  typeof true; // boolean

  typeof Symbol(); // symbol

  typeof undefined; // undefined

  typeof what; // undefined

  typeof {a:1}; // object

  typeof [1, 2, 3]; // object

  Array.isArray(arrayName); // true if an array

  typeof function(){}; // function

  typeof class C {}; // function

  typeof Math.PI; // function

  typeof null; // object


  // Type conversion

  String(true); // turns a value into a string --> "true"
  
  100 + ""; // turns a value into a string --> "100"

  Number("123"); // turns a value into a number --> 123
  
  +null; // turns a value into a number --> 0

  Number("hello"); // if the type isn't convertible --> NaN

  Boolean(1); // turns a value into a boolean --> true

  !!0; // turns a value into a boolean --> false




// VARIABLES
// JavaScript variables are containers for storing data values.


  var a; // creates variable without value

  var a; a = 10; // create variable with value of '10'

  var a = 10; // shortened method

  var a = 0; a += 1; a++; // add 1 and 1 to 'a' variable to reach 2

  var a = 5; a -= 1; a--; // subtracts 1 and 1 to reach 3

  var a = 5; a *= 5; a /= 5; // multiply by 5 and divide by 5 to reach 5

  var a = 3; var b = a + 2; // 'b' will value 5 (3+2)

  var a = 2 ** 3; // a = 2^3 = 8 !!IE

  var a = 1e6; // 1000000

  var a = 3; a = (a++, a*=3, a-=3); // serie of expression in one line --> a = 9

  var a = "five" * 2; // 'a' is NaN; Not a Number

  var a = (b > 10) ? "Over ten" : "Under ten"; // if b>10, a will equal "Over ten"; otherwise, "Under ten"; it's called ternary operator

  var a = b > 0 ? "positive" : b < 0 ? "negative" : "zero"; // a will be positive, negative or zero according to b value

  var a = true && false; // false; returns the first falsy value; default is last value
 
  var a = true || false; // true; returns the first truthy value; default is last value




// ECMASCRIPT 6 !!IE

  // VARIABLES
  // Javascript const are containers you can only read; best use for value that will not change

  // basic const
  const a = 23;

  // exception to rewrite const -> in a block
  if (a === 23) {
    const a = 7; // here and only here a = 7
  }
  console.log(a); // 23 again

  // with arrays
  const myArray = [1, 2, 3];
  myArray[0] = 4; // can be freezed with Object.freeze()

  // with objects
  const myObject = {"key": "value"};
  myObject.key = "otherValue"; // keys are not protected; can be with Object.freeze()

  // with arrays
  const myArray = [];
  myArray = [8]; // not possible
  myArray.push(8); // possible

  // let are block-scoped variables
  // let vs var
  var a = 5, b = 10;
  if (a === 5) {
    let a = 4; // only 4 in if block
    var b = 1;
    console.log(a, b); // 4 1
  }
  console.log(a, b); //  5 1

  // const are block-scoped variables that can't be reassigned but that can be updated
  const arr = [1, 2, 3];
  // Trying to reassign a const will give an error
  arr = [5]; // ERROR
  // Updating a const will succeed
  arr.push(4); // [1, 2, 3, 4]


  // Template literals
  const easyText = `<p class="danger">
  It's way easier to write strings with "quotes" and breaks
  </p>`;


  // FUNCTIONS 
  // arrow function
  const myFunc = () => {
    const myVar = "value";
    return myVar;
  }
  
  // arrow function shorter
  const myFunc = () => "value";
  myFunc(); // "value"

  // arrow function with parameter
  const myFunc = (item) => item * 2;
  myFunc(3); // 6

  // arrow function with parameters
  const myConcat = (arr1, arr2) => arr1.concat(arr2);
  myConcat([1,2], [3,4]); // [1,2,3,4]

  // arrow function with higher order functions (.map)
  const arr = [1, 2, 3];
  const squares = arr.map(x => x * x); // 1, 4, 9

  // default parameter for function
  function greet(name = "Anonymous") {
    console.log("Hello" + name);
  }
  great(); // Hello Anonymous
  great("Einstein"); // Hello Einstein

  // Rest in function
  function howMany(...args) {
    return args.length + " arguments";
  }
  howMany("hi", 1, true); // 3 arguments


  // ARRAYS
  // Spread operator with array
  const arr = [1, 9, 3, 4];
  const arr2 = [17];
  const newArr = [...arr, ...arr2, 21]; // [1, 9, 3, 4, 17, 21]

  // Copy an array with spread
  const arr = [1, 2, 3, 4];
  const arrCopy = [...arr];

  // String to array with spread
  const str = "Aloha";
  const arr = [...str]; // [A, l, o, h, a]

  // rest for destructuring array
  const [first, ...rest] = [1, 9, 3, 4]; // 1 and [9, 3, 4]


  // some loop
  const arr = [1, 2, 3, 4, 5];
  arr.some((value) => { return (value == 3); }); // returns true; a single array value must be true to have a true output from an every loop


  // every loop
  const arr = [1, 2, 3, 4, 5];
  arr.every((value) => { return (value == 3); }); // returns false; all array values must be true to have a true output from an every loop


  // OBJECTS
  // Object enumerables
  const obj = {id: 1, name: "John"};
  const entries = Object.entries(obj); // [['id', 1], ['name', 'John']]
  const keys = Object.keys(obj); // ['id', 'name']
  const values = Object.values(obj); // [1, 'John']
  const objFromEntries = Object.fromEntries(entries); // {id: 1, name: "John"}

  // spread with object
  const obj = {id: 1, name: "John"};
  const obj2 = {age: 29};
  const newArr = {...obj, ...obj2, city: "Gotham"}; // {id: 1, name: "John", age: 29, city: "Gotham"}

  // nested object update with spread
  const user = {id: 3, name: 'Ron', organization: {name: 'Parks & Recreation', city: 'Pawnee'}};
  const updatedUser = {...user, organization: {...user.organization, position: 'Director'}}; // {id: 3, name: "Ron", organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}}

  // Copy an object with spread
  const obj = {id: 1, name: "John"};
  const objCopy = [...obj]; // {id: 1, name: "John"}


  // rest for destructuring object
  const {id, ...rest} = {id: 1, name: "John", age: 29}; // 1 and {name: "John", age: 29}


  // dynamic property name
  const anything = 'something';
  const short = 1;
  const obj = {
    [anything]: 5,
    short
  }
  console.log(obj.anything, obj.something); // undefined, 5
  console.log(obj.short); // 1


  // Class syntax; replaces constructor function
  class SpaceShuttle {
    constructor(targetPlanet){
      this.targetPlanet = targetPlanet;
    }
  }
  const zeus = new SpaceShuttle('Jupiter');

  // Getters and Setters
  class Thermostat {
    constructor(farenheit) {
      this.farenheit = farenheit;
    }
    get temperature() {
      return (this.farenheit - 32) * 5/9;
    }
    set temperature(celsius){
      this.farenheit = celsius * 9.0 / 5 + 32;
    }
  }
  const thermos = new Thermostat(76); // setting in Fahrenheit scale
  let temp = thermos.temperature; // 24.44 °C




// DEEP COPY
// opposed to shallow copy, deep copy doesn't hold reference, even for nested objects and arrays
const obj1 = { id: 1, name: "one", user: { id: 1, name: "user1", start: new Date() } };
const deep1 = { ...obj1, user: { ...obj1.user } }; // fast but verbose
const deep2 = JSON.parse(JSON.stringify(obj1)); // slower (switch dates to string!)
const deep3 = structuredClone(obj1); // slowest




// POP-UPS
// launch pop-up


  confirm("Are you sure to leave?"); // launch pop-up to confirm -> return true/false

  prompt("Enter tour name"); // launch pop-up where user can answer -> return the answer

  alert("hello"); // launch pop-up with text

  var name = prompt("Enter your name :"); alert("hello, " + name); // pop-up to type name and another one to say 'hello name'



// USEFUL TOOLS
// other useful snippet of codes


  // create audio and start it
  var audio = new Audio("file.mp3");
  audio.play();




// COMPARISONS
// Comparison and Logical operators are used to test for true or false


  // smaller than 
  console.log(8 < 10); // true
  console.log(10 < 8); // false
    
  // greater than
  console.log(10 > 8); // true
  console.log(8 > 10); // false
    
  // smaller or equal to
  console.log(10 <= 10); // true
  console.log(10 <= 8); // false
    
  // greater or equal to
  console.log(10 >= 10); // true
  console.log(8 >= 10); // false
    
  // equal to (weak)
  console.log(10 == 10); // true
  console.log(8 == 10); // false
    
  // different from (weak)
  console.log(10 != 8); // true
  console.log(8 != 8); // false
    
  // equal to and same type (strict)
  console.log(10 === 10); // true
  console.log(8 === 10); // false
    
  // different and different type from (strict)
  console.log(10 !== 8); // true
  console.log(8 !== 8); // false
    
  // 'AND'
  console.log((10 > 8) && (10 === 10)); // true
  console.log((10 > 8) && (8 === 10)); // false
    
  // 'OR'
  console.log((8 < 10) || (8 > 10)); // true
  console.log((10 < 8) || (8 > 10)); // false
    
  // opposite of instruction
  console.log(!(10 < 8)); // true
  console.log(!(8 < 10)); // false

  
  

// CONDITIONS
// Conditional statements are used to perform different actions based on different conditions


  // return the sentence because it is true
  var a = 4;
  if (a === 4) {
    console.log("a is 4"); // OK
  }


  // return the else if because if is false
  var a = 4;
  if (a > 4) {
    console.log("a is greater than 4");
  } else if (a === 4) {
    console.log ("a is 4"); // OK
  }


  // return the else because it's false
  var a = 4;
  if (a > 4) {
    console.log("a is greater than 4");
  } else if (a < 4) {
    console.log("a is less than 4");
  } else {
    console.log ("a isn't greater or less than 4 --> a is 4"); // OK
  }


  // switch is a better way for defined options // do not forget the break; !
  var a = 4; 
  switch (a) {
    case "1":
      console.log("a is 1");
      break;
    case "2":
      console.log("a is 2");
      break;
    case "4":
      console.log("a is 4"); // OK
      break;
    default: // if none of cases is true
      console.log("a is a variable");
      break;
  }


  // if you do not use breaks, cases will merge till the next break
  var a = 4;
  switch (a) {
    case 1:
    case 2:
    case 3:
      console.log("a is 1, 2, 3");
      break;
    case 4:
      console.log("a is 4"); // OK
      break;
    case 7:
    case 8:
    case 9:
      console.log("a is 7, 8, 9");
      break;
  }




// SHORT CIRCUIT
// handy way to manage short conditions

  
  // Logical &&
  var a = true && true; // true
  var a = true && false; // false
  var a = false && false; // false
  var a = "cat" && "dog"; // "dog"


  // Logical ||
  var a = true || true; // true
  var a = true || false; // true
  var a = false || false; // false
  var a = "cat" || "dog"; // "cat"


  // with a function
  function short(test) {
    var a = test || "Test is not defined"; // a = test value if defined; otherwise a = string
  }


  // chose between functions
  function short() {
    func1() || func2(); // runs func1 if it exists; otherwise runs func2
  }




// LOOPS
// while the condition is true, the code is looping


  // while loop; use it by default
  var a = 1;
  while (a <= 4) {
    console.log(a);
    a++;
  } // 1 2 3 4

  
  // /!\ careful with infinite loops --> it breaks applications
  var a = 1;
  while (a <= 4) {
    console.log(a); // the condition will always be true and will therefore lead to infinite loop
  }


  // do while loop; while alike, but will do the first block code at least once (even if while is false)
  var a = 1;
  do {
    console.log(a);
    a++;
  }
  while (a < 1); // 1


  // for loop; use when you know the number of loops
  var a;
  for (a = 1; a <= 4; a++) {
    console.log(a);
  } // 1 2 3 4


  // when variable is only used in the for loop
  for (var a = 1; a <= 4; a++) {
    console.log(a);
  } // 1 2 3 4


  // break; end of the loop
  for (var a = 1; a <= 4; a++) {
    if (a === 3) {
      break;  
    }
    console.log(a);
  } // 1 2; stops when 3 reached


  // continue; breaks one iteration in the loop
  for (var a = 1; a <= 4; a++) {
    if (a === 3) {
      continue; 
    }
    console.log(a);
  } // 1 2 4; skips 3


  // fizzbuzz (similar to dingdingbottle)
  for (var a = 1; a <= 100; a++) {
    if ((a % 3 === 0) && (a % 5 === 0)) {
      console.log("FizzBuzz");
    } else if (a % 3 === 0) {
      console.log("Fizz");
    } else if (a % 5 === 0) {
      console.log("Buzz");
    } else {
      console.log(a);
    }
  } // 1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz ...


  // forEach loop
  var a = [1, 2, 3, 4, 5];
  a.forEach(function(element) {
    console.log(element);
  }); // 1 2 3 4 5



  // recursion
  function countDownFrom(number) {
    if (number === 0) { return; }
    console.log(number);
    countDownFrom(number - 1);
  }
  countDownFrom(5); // 5 4 3 2 1




// FUNCTIONS
// A JavaScript function is a block of code designed to perform a particular task. You need to invoke it


  // simple function
  function sayHello() {
    console.log('Hello !');
  }
  sayHello(); // Hello !


  // function with return; function exits at return statement, whatever comes after a return line never outputs
  function sayHello() {
    return 'Hello !';
  }
  console.log(sayHello()); // Hello !


  // function with return and variable
  function sayHello() {
    return 'Hello !';
  }
  var resultat = sayHello();
  console.log(resultat); // Hello !


  // local variables; they can't be used outside the function
  function sayHello() {
    var message = 'Hello !';
    return message;
  }
  console.log(sayHello()); // Hello !
  console.log(message); // error, variable works only inside function


  // function with parameters
  function sayHello(name) {
    var message = 'Hello, ' + name + ' !';
    return message;
  }
  console.log(sayHello('Beumsk')); // Hello, Beumsk !


  // function with multiple parameters
  function sayHello(name, surname) {
    var message = 'Hello, ' + name + ' ' + surname + ' !';
    return message;
  }
  console.log(sayHello('Mr', 'Beumsk')); // Hello, Mr Beumsk !


  // function with for loop
  function carre(number) {
    var resultat = number * number;
    return resultat;
  }
  for (var i = 0; i <= 10; i++) {
    console.log(carre(i));
  }


  // function with if
  function min(number1, number2) {
    if (number1 > number2) {
      return number2;
    } else {
      return number1;
    }
  }
  console.log(min(9, 1));


  // function nested in function
  function first() {
    console.log("first");
    return function() {
      console.log("second");
    }
  }
  first(); // logs first
  first()(); // logs first and second


  // Double arg Function
  function say(arg1) {
    return function(arg2) {
      return arg1 + " " + arg2;
    }
  }
  say ("hello")("world"); // hello world


  // calculator
  function calculator(number1, mult, number2) {
    if (mult === '+') {
      return number1 + number2;
    } else if (mult === '-') {
      return number1 - number2;
    } else if (mult === '*') {
      return number1 * number2;
    } else if (mult === '/') {
      return number1 / number2;
    }
  }
  console.log(calculator(4, "+", 6)); // returns 10
  console.log(calculator(4, "-", 6)); // returns -2
  console.log(calculator(2, "*", 0)); // returns 0
  console.log(calculator(2, "/", 0)); // returns Infinity


  // circle perimeter and radius
  function perimeter(radius) {
    return 2 * Math.PI * radius;
  }
  function area(radius) {
    return Math.PI * radius * radius;
  }
  console.log(perimeter(10)); // 62.83185307179586
  console.log(area(10)); // 314.1592653589793




// STRING 
// methods working on text strings


  // string.length with variables
  var str = "Kangaroo";
  console.log(str.length); // 8


  // string.includes() check if string includes another stinrg
  var str = "Kangaroo";
  console.log(str.includes("anga")); // true


  // string.startsWith() check if string starts with something
  var str = "Kangaroo";
  console.log(str.startsWith("Kan")); // true


  // string.endsWith() check if string ends with something
  var str = "Kangaroo";
  console.log(str.endsWith("roo")); // true


  // string.charAt() return specific character
  var str = "Kangaroo";
  console.log(str[0]); // "K"
  console.log(str.charAt(0)); // "K"


  // string.charCodeAt() returns charCode
  var str = "Kangaroo";
  console.log(str.charCodeAt(0)); // charCode of "K" => 75


  // string.fromCharCode() returns character from charCode
  console.log(String.fromCharCode(75)); // show character of 75 charcode => "A"


  // string.indexOf() return position of a character
  var str = "Kangaroo";
  console.log(str.indexOf("a")); // 1


  // string.lastIndexOf() return position of a character
  var str = "Kangaroo";
  console.log(str.lastIndexOf("a")); // 4


  // string.trim() remove spaces at beginning and end of a string
  var str = "   Kangaroo   ";
  console.log(str.trim()); // "Kangaroo"
  console.log(str.trimStart()); // "Kangaroo   "
  console.log(str.trimEnd()); // "   Kangaroo"


  // string.slice() picks part of the string (start, end-1)
  var str = "Kangaroo";
  console.log("slice".slice(0, 3)); // "Kan"


  // string.repeat() multiply a string !!IE
  var str = "Kangaroo";
  console.log(str.repeat(3)); // "KangarooKangarooKangaroo"


  // string.toLowerCase()
  var str = "Kangaroo";
  console.log(str.toLowerCase()); // "kangaroo"


  // string.toUpperCase()
  var str = "Kangaroo";
  console.log(str.toUpperCase()); // "KANGAROO"


  // capitalize first letter
  var str = "kangaroo";
  str.charAt(0).toUpperCase() + str.slice(1); // Kangaroo


  // string.replace() replace a string in a string
  var str = "Salut, c'est chouette !";
  console.log(str.replace("chouette", "cool")); // "Salut, c'est cool !"


  // use replace to add spaces before uppercases; or smth else
  var str = "myNameIsWhat";
  console.log(str.replace(/([a-z])([A-Z])/g, "$1 $2")); // my Name Is What
  console.log(str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()); // my-name-is-what


  // return all character from a string
  var word = "Kangaroo";
  for (var i = 0; i < word.length; i++) {
    console.log(word[i]);
  }


  // lots of process on a word
  var word = "Kangaroo";
  function countVowels(word) {
    var vowels = 0;
    for (var i = 0; i < word.length; i++) {
      var letter = word[i].toLowerCase();
      if ((letter === "a") || (letter === "e") || (letter === "i") || (letter === "o") || (letter === "u") || (letter === "y")) {
        vowels++;
      }
    }
    return vowels;
  }
  console.log("Vowels: " + countVowels(word)); // Vowels: 4
  console.log("Consonants: " + (word.length - countVowels(word))); // Consonants: 4


  var word = "Kangaroo";
  function backWards(word) {
    var backWord = "";
    for (var i = 0; i < word.length; i++) {
      backWord = word[i] + backWord;
    }
    return backWord;
  }
  console.log("Backwards: " + backWards(word)); // Backwards: ooragnaK

  if (word === backWards(word)) {
    console.log("Palindrome: True");
  } else {
    console.log("Palindrome: False");
  } // Palindrome: False


  var word = "Kangaroo";
  function convertLeetSpeak(word) {
    var leetWord = "";
    for (var i = 0; i < word.length; i++) {
      leetWord = leetWord + findLeetLetter(word[i]);
    }
    return leetWord;
  }
  function findLeetLetter(letter) {
    var leetLetter = letter;
    switch (letter.toLowerCase()) {
    case "a" :
      leetLetter = "4";
      break;
    case "b" :
      leetLetter = "8";
      break;
    case "e" : 
      leetLetter = "3";
      break;
    case "l" :
      leetLetter = "1";
      break;
    case "o" :
      leetLetter = "0";
      break;
    case "s" :
      leetLetter = "5";
      break;
    }
    return leetLetter;
  }  
  console.log(convertLeetSpeak(word)); // K4ng4r00




// NUMBERS
// methods working on numbers


  // toString; number to string
  (123).toString(); // 123
  var x = 123; x.toString(); // 123
  (100 + 23).toString(); // 123


  // toFixed; number of decimals returned as string
  (2.343).toFixed(0); // '2'
  (2.343).toFixed(2); // '2.34'
  (2.343).toFixed(4); // '2.3430'


  // Number; turns value into number
  Number(true); // 1; 0 if false
  Number("10"); // 10
  Number("10 20"); // NaN


  // parseInt; first number returned
  parseInt("10"); // 10
  parseInt("10.33"); // 10
  parseInt("10 20"); // 10
  parseInt("10 years"); // 10
  parseInt("years 10"); // NaN


  // parseInt; first number returned (same as parseInt but with decimals)
  parseFloat("10"); // 10
  parseFloat("10.33"); // 10.33
  parseFloat("10 20"); // 10
  parseFloat("10 years"); // 10
  parseFloat("years 10"); // NaN




// MATH
// Functions working on numbers; they start with 'Math.'


  // Math.min; returns the smallest number from parameters
  Math.min(9, 7, 6, 1); // 1


  // Math.max; returns the biggest number from parameters
  Math.max(9, 1, 6, 3, 5); // 9


  // Math.random; returns a random number between 0 and 1
  Math.random();


  // Math.random; 
  Math.random() * 100; // random number 1 to 100; change '100' to change possibilities of course
  Math.floor(Math.random() * 100); // random integer


  // Math.round
  Math.round(4.3); // 4
  Math.round(4.7); // 5
  Math.round(0.6666 * 100) / 100; // 0.67
  Math.round(0.66666666 * 10000) / 10000; // 0.6667


  // Math.ceil; round value up
  Math.ceil(4.3); // 5


  // Math.floor; round value down
  Math.floor(4.7); // 4


  // Math.pow; returns first parameter powered by second parameter
  Math.pow(5, 2); // 25


  // Math.sqrt; returns square root of parameter
  Math.sqrt(16); // 4


  // Math.abs; returns absolute of parameter
  Math.abs(-12); // 12


  // Math.PI
  Math.PI // 3.141592653589793


  // Math.sign; returns -1 or 1 based on number
  Math.sign(-11); // -1


  // eval; takes a string and do the math
  eval("10 * 5 + 10 / 2") // 55
  
  


// DATE
// Date object enables us to work with dates; dates are calculated from 01 Jan 1970 00:00:00


  // current date and time
  var d = new Date();
  console.log(d); // now


  // set date easily
  var d2 = new Date("January 2, 2015 10:42:00"); // Fri Jan 02 2015 10:42:00 GMT+0100 (Central European Standard Time)


  // set date with numbers
  var d3 = new Date(88,5,11,11,42,0,0); // Sat Jun 11 1988 11:42:00 GMT+0100 (Central European Standard Time)


  // format date easily
  new Date("January 2, 2015 10:42:00").toDateString(); // Fri Jan 02 2015


  new Date("January 2, 2015 10:42:00").toTimeString(); // 10:42:00 GMT+0100 (Central European Standard Time)


  // time values
  var d = new Date();
  var hours = d.getHours(); // current hour
  var minutes = d.getMinutes(); // current minute
  var seconds = d.getSeconds(); // current second
  var milliseconds = d.getMilliseconds(); // current millisecond


  // day values
  var d = new Date();
  var day = d.getDay(); // day of week
  var date = d.getDate(); // day of month
  var month = d.getMonth()+1; // add 1 because month count starts at 0 (jan=0; dec=11)
  var year = d.getFullYear(); // current year


  // add days, months, years to a date
  var oldDate = new Date(); // today
  var newDate = new Date(oldDate.getFullYear(), oldDate.getMonth(), oldDate.getDate()+1); // tomorrow
  var newDate = new Date(oldDate.getFullYear(), oldDate.getMonth()+1, oldDate.getDate()); // next month
  var newDate = new Date(oldDate.getFullYear()+1, oldDate.getMonth(), oldDate.getDate()); // next year


  // function to change date format easily
  function convertDate(inputFormat) {
    function pad(s) { return (s < 10) ? "0" + s : s; }
    var d = new Date(inputFormat);
    return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join("."); // dd.mm.yyyy
  }




// ARRAYS
// JavaScript arrays are used to store multiple values in a single variable; they are number indexed
// Careful! -> if variable is set equals to another array variable, they will be linked and influence each other (may cause infinite loops)


  // basic
  var arr = [0, 1, 2, 3, 4];
  

  // array length
  var arr = [0, 1, 2, 3, 4];
  console.log(arr.length); // 5


  // empty an array
  var arr = [0, 1, 2, 3, 4];
  arr.length = 0;
  console.log(arr); // []


  // check if array is empty
  var arr = [0, 1, 2, 3, 4];
  if (arr.length !== 0) {
    console.log("Array is not empty !");
  } else {
    console.log("Array is empty");
  }


  // log an array element
  var arr = [0, 1, 2, 3, 4];
  console.log(arr[0]); // 0


  // log all array elements
  var arr = [0, 1, 2, 3, 4];
  for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  } // 0 1 2 3 4


  // log all array elements with forEach
  var arr = [0, 1, 2, 3, 4];
  arr.forEach(function(el) {
    console.log(el); // return in a forEach() doesn't return the whole function but only a single iteration
  }); // 0 1 2 3 4


  // log all array elements with forEach and a predefined function
  var arr = [0, 1, 2, 3, 4];
  function func(el) {
    console.log(el);
  }
  arr.forEach(func); // 0 1 2 3 4


  // log all array elements backwards
  var arr = [0, 1, 2, 3, 4];
  for (var i = arr.length-1; i >= 0; i--) {
    console.log(arr[i]);
  } // 4 3 2 1 0


  // push() add an element (to the end)
  var arr = [0, 1, 2, 3, 4];
  arr.push(5); // possible to add multiple elements
  console.log(arr); // [0, 1, 2, 3, 4, 5]


  // unshift() add an element (from the front)
  var arr = [0, 1, 2, 3, 4];
  arr.unshift(-1); // possible to add multiple elements
  console.log(arr); // [-1, 0, 1, 2, 3, 4]

  // pop() remove last element
  var arr = [0, 1, 2, 3, 4];
  arr.pop();
  console.log(arr); // [0, 1, 2, 3]


  // shift() remove first element
  var arr = [0, 1, 2, 3, 4];
  arr.shift();
  console.log(arr); // [1, 2, 3, 4]


  // pop() element and store the removed element
  var arr = [0, 1, 2, 3, 4];
  var deleted = arr.pop(); // 4 is no more in array and stored in 'deleted'
  console.log(deleted); // 4
  console.log(arr); // [0, 1, 2, 3]


  // shift() element and store the removed element
  var arr = [0, 1, 2, 3, 4];
  var deleted = arr.shift(); // 0 is no more in array and stored in 'deleted'
  console.log(deleted); // 0
  console.log(arr); // [1, 2, 3, 4]


  // turn arguments of a function into an array
  var arr;
  function func() {
    arr = Array.prototype.slice.call(arguments);
  }
  func(0, 1, 2, 3, 4);
  console.log(arr); // [0, 1, 2, 3, 4]


  // loop through function arguments
  function func(arr1, arr2, arr3) {
    for (i=0; i<arguments.length; i++) {
      console.log(arguments[i]);
    }
  }
  func(0, 1, 2, 3, 4); // 0 1 2 3 4


  // map() make change on arrays; iterate
  var arr = [1, 2, 3];
  var arr2 = arr.map(function(val) {
    return val * 3;
  });
  console.log(arr2); // [3, 6, 9]; they have been multiplied


  // reduce() use all values, one at a time, to get a single one; condense
  var arr = [0, 1, 2, 3, 4];
  var singleVal = arr.reduce(function(combinedValue, currentValue) {
    return combinedValue - currentValue;
  }, 0); // start at value[0]; do not use it for multiplications
  console.log(singleVal); // will result in -0-1-2-3-4 = -10


  // filter() an array
  var arr = [0, 1, 2, 3, 4];
  var arr2 = arr.filter(function(val) {
    return val < 3; // keep what is said; all values under 3
  });
  console.log(arr2); // [0, 1, 2]


  // delete some array values
  var arr = [0, 1, 2, 3, 4];
  delete arr[2];
  console.log(arr); // [0, 1, null, 3, 4]
  arr = arr.filter(Boolean); // to remove null, undefined etc.
  console.log(arr); // [0, 1, 3, 4]


  // filter() Boolean, will delete false, null, 0, "", undefined, and NaN.
  function numbersLettersOnly(arr) {
    return arr.filter(Boolean);
  }
  numbersLettersOnly([7, "abc", false, null, 0, 9, NaN, "hello", undefined, ""]); // [7, "abc", 9, "hello"]


  // sort() an array; for alphabetic sorting, just need sort()
  var arr = [0, 1, 2, 3, 4];
  arr.sort(function(a, b) {
    return b - a; // from largest; a - b to sort from smallest
  });
  console.log(arr); // [4, 3, 2, 1, 0]


  // indexOf() get index position of a value in an array
  var arr = [0, 1, 2, 3, 4];
  var i = arr.indexOf(3);
  console.log(i); // 3; position of value 3


  // indexOf() can be used to check if an array includes an element
  var arr = [0, 1, 2, 3, 4];
  var i = arr.indexOf(6);
  console.log(i); // -1; the value isn't in the array


  // lastIndexOf() get index position of a value in an array (starting from the end)
  var arr = [0, 1, 2, 3, 3, 4];
  var i = arr.lastIndexOf(30);
  console.log(i); // 4; position of last value 3


  // reverse() an array
  var arr = [0, 1, 2, 3, 4];
  arr.reverse();
  console.log(arr); // [4, 3, 2, 1, 0]


  // concat() an array with another one
  var arr = [1, 2, 3];
  var concatenateMe = [4, 5, 6];
  var arr2 = arr.concat(concatenateMe);
  console.log(arr2); // [1, 2, 3, 4, 5, 6]


  // split() a string into an array
  var str = "0 1 2 3 4";
  var arr = str.split(" "); // can be other character
  console.log(arr); // [0, 1, 2, 3, 4]


  // split() number into an array 
  var num = 1234;
  var arr = (""+num).split("");
  console.log(arr); // ["1", "2", "3", "4"]


  // join() an array into a string
  var arr = ["0", "1", "2", "3", "4"];
  var str = arr.join(" ");
  console.log(str); // "0 1 2 3 4"


  // slice() to copy parts of an array
  var arr = [0, 1, 2, 3, 4];
  var arr2 = arr.slice(0, 2); // keep from index O to 2 (not taken)
  console.log(arr); // [0, 1, 2, 3, 4]
  console.log(arr2); // [0, 1]


  // slice() to copy an array
  var arr = [0, 1, 2, 3, 4];
  var arr2 = arr.slice(); // keep all
  console.log(arr2); // [0, 1, 2, 3, 4]


  // splice() a single element
  var arr = [0, 1, 2, 3, 4];
  var arr2 = arr.splice(2, 1); // arr = from index 2, remove 1 || arr2 = from index 2, keep 1
  console.log(arr); // [0, 1, 3, 4]
  console.log(arr2); // [2]


  // splice() multiple elements
  var arr = [0, 1, 2, 3, 4];
  var arr2 = arr.splice(3, 2); // arr = from index 3, remove 2 || arr2 = from index 3, keep 2
  console.log(arr); // [0, 1, 2]
  console.log(arr2); // [3, 4]


  // array destructuring
  var arr = [0, 1, 2, 3, 4];
  var [zero, one, two, ...rest];
  // var [zero, one, two, ...rest] = [0, 1, 2, 3, 4];
  console.log(zero, one, two, rest); // 0, 1, 2, [3, 4]


  // find the right card 
  var cards = ['Diamond', 'Spade', 'Heart', 'Club'];
  var currentCard = 'Heart';
  while (currentCard !== 'Spade') {
    console.log(currentCard);
    var randomNumber = Math.floor(Math.random() * 4);
    currentCard = cards[randomNumber];
  }
  console.log('Spade found !');


  // list of films
  var Films = [];
  var Film = {
    init: function(title, year, director) {
      this.title = title;
      this.year = year;
      this.director = director;
    },
    describe: function() {
      return this.title + ' (' + this.year + ', ' + this.director + ')';
    }
  };
  var film1 = Object.create(Film);
  film1.init('Star Wars', 1977, 'Georges Lucas');
  Films.push(film1);
  var film2 = Object.create(Film);
  film2.init('LOTR', 2001, 'Peter Jackson');
  Films.push(film2);
  var film3 = Object.create(Film);
  film3.init('Indiana Jones', 1981, 'Steven Spielberg');
  Films.push(film3);
  Films.forEach(function(Film) {
    console.log(Film.describe());
  });




// OBJECTS
// they are like complexed variables; they include multiple parameters and functions; they are named indexed


  // simple object with 3 properties
  var pen = {
    type: "ball",
    color: "blue",
    brand: "Bic"
  };
  console.log(pen.type); // ball
  console.log(pen.color); // blue
  console.log(pen.brand); // Bic


  // other way to create object
  var obj = new Object();
  obj.prop = "anything";


  // change property
  pen.color = "red";


  // other way to set and get properties; useful for var or parameters, or with var containing spaces
  pen["is working"] = true;
  console.log(pen["is working"]); // true


  // add property
  pen.price = 2;
  console.log("My " + pen.brand + " " + pen.color + " " + pen.type + "pen costs " + pen.price + " euros." );
  

  // delete a property
  delete pen.price;


  // check if a property exists; true or false
  pen.hasOwnProperty("color");
  // or
  "color" in pen;


  // for in loop
  var person = {firstName: "John", lastName: "Doe", age: 25};
  for (var x in person) {
    console.log(x + ": " + person[x]); // logs all property value pairs
  }


  // copy an object (by reference); objects will always be linked to each other
  var person = {firstName: "John", lastName: "Doe", age: 25};
  var copy = person;
  person.firstName = "David";
  console.log(copy.firstName); // David and not John


  // clone an object; makes object independant;
  var person = {firstName: "John", lastName: "Doe", age: 25};
  var clone = {};
  for (var key in person) {
    clone[key] = person[key];
  }


  // object destructuring
  var obj = {zero: 0, one: 1, two: 2, three: 3, four: 4};
  var {zero, one, two, ...rest};
  // var {zero, one, two, ...rest} = {zero: 0, one: 1, two: 2, three: 3, four: 4};
  console.log(zero, one, two, rest); // 0, 1, 2, {three: 3, four: 4}


  // basic rpg with function inside object
  var char = {
    name: 'Beumsk',
    hp: 200,
    strength: 150,
    describe: function() {
      var description = this.name + ' has ' + this.hp + ' hp and ' + this.strength + ' strength.';
      return description;
    }
  };
  console.log(char.describe());
  console.log(char.name + ' is hurt by an arrow! 20 hp lost...');
  char.hp = char.hp - 20;
  console.log(char.describe());
  console.log(char.name + ' found a strength ring! 10 strength more!');
  char.strength = char.strength + 10;
  console.log(char.describe());


  // dog describe + function
  var dog = {
    name: 'Medor',
    race: 'Labrador',
    size: 88,
    bark: function() {
      return 'Grrrrr !';
    }
  };
  console.log(dog.name + ' is a ' + dog.race + ' of ' + dog.size + ' cm.');
  console.log('Watch out ! A cat ! ' + dog.name + ' Bark : ' + dog.bark());


  // prompt radius to give perimeter and area
  var r = Number(prompt("Enter the circle radius :"));
  var circle = {
    perimeter: function() {
      return 2 * Math.PI * r;
    },
    area: function() {
      return Math.PI * r * r;
    }
  };
  console.log("Perimeter = " + circle.perimeter());
  console.log("Area = " + circle.area());


  // account debit and credit
  var account = {
    holder: 'Jeanne',
    balance: 0,
    credit: function(money) {
      this.balance = this.balance + money;
    },
    debit: function(money) {
      this.balance = this.balance - money;
    },
    describe: function() {
      return 'Holder: ' + this.holder + '; Balance: ' + this.balance;
    }
  };
  console.log(account.describe());
  account.credit(200);
  account.debit(150);
  console.log(account.describe());


  // account debit and credit with prompt
  var credit = Number(prompt('Enter your credit'));
  var debit = Number(prompt('Enter your debit'));
  var account = {
    holder: 'Jeanne',
    balance: 0,
    credit: function() {
      this.balance = this.balance + credit;
    },
    debit: function() {
      this.balance = this.balance - debit;
    },
    describe: function() {
      return 'Holder: ' + this.holder + '; Balance: ' + this.balance;
    }
  };
  console.log(account.describe());
  account.credit();
  account.debit();
  console.log(account.describe());




// OOP
// Object Oriented programming


// Capitalize first letter of an object constructor
function Dog(name, sex, age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
}
var example = new Dog("Dogidog", "male", 3);

// check if object is an instance of a constructor
example instanceof Dog; // true
fake instanceof Dog; // false

// check own properties
var ownProps = [];
for (var property in example) {
  if(example.hasOwnProperty(property)) {
    ownProps.push(property); // "name", "sex", "age"
  }
}




// PROTOTYPES
// they allow objects to get values from other objects


  // simple prototype
  var anObject = {
    a: 10
  };
  var anotherObject = Object.create(anObject);
  console.log(anObject.a);
  console.log(anotherObject.a);


  // multiple prototype
  var anObject = {
    a: 10
  };
  var anotherObject = Object.create(anObject);
  var stillAnotherObject = Object.create(anotherObject);
  console.log(anObject.a);
  console.log(anotherObject.a);
  console.log(stillAnotherObject.a);


  // use prototype to create new characters
  var char = {
    name: '',
    hp: 0,
    strength: 0,
    xp: 0,
    describe: function() {
      return this.name + ' has ' + this.hp + ' hp, ' + this.strength + ' strength and ' + this.xp + ' xp.';
    }
  };
  var nala = Object.create(char);
  nala.name = 'Nala';
  nala.hp = 200;
  nala.strength = 150;
  var apa = Object.create(char);
  apa.name = 'Apa';
  apa.hp = 300;
  apa.strength = 200;
  console.log(nala.describe());
  console.log(apa.describe());


  // faster way
  var char = {
    init: function(name, hp, strength) {
      this.name = name;
      this.hp = hp;
      this.strength = strength;
      this.xp = 0;
    },
    describe: function() {
      return this.name + ' has ' + this.hp + ' hp, ' + this.strength + ' strength and ' + this.xp + ' xp.';
    }
  };
  var nala = Object.create(char);
  nala.init('Nala', 200, 150);
  var apa = Object.create(char);
  apa.init('Apa', 300, 200);
  console.log(nala.describe());
  console.log(apa.describe());


  // with ennemies
  var char = {
    initChar: function(name, hp, strength) {
      this.name = name;
      this.hp = hp;
      this.strength = strength;
    }
  };
  var player = Object.create(char);
  player.initPlayer = function(name, hp, strength) {
    this.initChar(name, hp, strength);
    this.xp = 0;
  };
  player.describe = function() {
    return this.name + ' has ' + this.hp + ' hp, ' + this.strength + ' strength and ' + this.xp + ' xp.';
  };
  var ennemy = Object.create(char);
  ennemy.initEnnemy = function(name, hp, strength, race, value) {
    this.initChar(name, hp, strength);
    this.race = race;
    this.value = value;
  };
  var nala = Object.create(player);
  nala.initPlayer('Nala', 200, 150);
  var apa = Object.create(player);
  apa.initPlayer('Apa', 300, 200);
  console.log('Welcome ! Check out our heroes :');
  console.log(nala.describe());
  console.log(apa.describe());
  var scar = Object.create(ennemy);
  scar.initEnnemy('Scar', 500, 350, 'Lion', 10);
  console.log('An awful monster arrives : it is a ' + scar.race + ' named ' + scar.name);


  // with damages
  var char = {
    initChar: function(name, hp, strength) { // initiate character
      this.name = name;
      this.hp = hp;
      this.strength = strength;
    },
    attack: function (target) { // attack a target
      if (this.hp > 0) {
        var damages = this.strength;
        console.log(this.name + ' attacks ' + target.name + ' for a total of ' + damages + ' combat points!');
        target.hp = target.hp - damages;
        if (target.hp > 0) {
          console.log(target.name + ' have now ' + target.hp + ' hp.');
        } else {
          target.hp = 0;
          console.log(target.name + ' is dead!');
        }
      } else {
        console.log(this.name + ' can not attack, he is dead...');
      }
    }
  };
  var player = Object.create(char);
  player.initPlayer = function(name, hp, strength) { // initiate player (proto char)
    this.initChar(name, hp, strength);
    this.xp = 0;
  };
  player.describe = function() { // describe player
    return this.name + ' has ' + this.hp + ' hp, ' + this.strength + ' strength and ' + this.xp + ' xp.';
  };
  player.fight = function(ennemy) { // fight an ennemy (takes the prototype of attack)
    this.attack(ennemy);
    if (ennemy.hp === 0) {
      console.log(this.name + ' killed ' + ennemy.name + ' and gets ' + ennemy.value + ' xp!');
      this.xp += ennemy.value;
    }
  };
  var ennemy = Object.create(char);
  ennemy.initEnnemy = function(name, hp, strength, race, value) { // initiate ennemy (proto char)
    this.initChar(name, hp, strength);
    this.race = race;
    this.value = value;
  };
  var nala = Object.create(player);
  nala.initPlayer('Nala', 200, 150);
  var apa = Object.create(player);
  apa.initPlayer('Apa', 300, 200);
  console.log('Welcome ! Check out our heroes :');
  console.log(nala.describe());
  console.log(apa.describe());
  var scar = Object.create(ennemy);
  scar.initEnnemy('Scar', 300, 50, 'Lion', 100);
  console.log('An awful monster arrives : it is a ' + scar.race + ' named ' + scar.name);
  scar.attack(nala);
  scar.attack(apa);
  nala.fight(scar);
  apa.fight(scar);
  console.log(nala.describe());
  console.log(apa.describe());


  // 
  var Dog = {
    init: function (name, race, size) {
      this.name = name;
      this.race = race;
      this.size = size;
    },
    bark: function() {
      return 'Grrr !';
    }
  };
  var rachel = Object.create(Dog);
  rachel.init("Rachel", "labrador", 75);
  console.log(rachel.name + " is a " + rachel.race + " measuring " + rachel.size + " cm");
  console.log("Ow a cat ! " + rachel.name + " bark : " + rachel.bark());
  var pheobe = Object.create(Dog);
  pheobe.init("Pheobe", "golden", 22);
  console.log(pheobe.name + " is a " + pheobe.race + " measuring " + pheobe.size + " cm");
  console.log("Ow a cat ! " + pheobe.name + " bark : " + pheobe.bark());


  // transfer between spare and account
  var Account = {
    initCB: function (name, balance) {
      this.name = name;
      this.balance = balance;
    },
    describe: function () {
      return 'Holder : ' + this.name + ', balance : ' + this.balance;
    },
    debit: function () {
      this.balance = this.balance - amount;
    },
    credit: function() {
      this.balance = this.balance + amount;
    }
  };
  var Spare = Object.create(Account);
  Spare.initCE = function(name, balance, interest) {
    this.initCB(name, balance);
    this.interest = interest;
  };
  Spare.addInterests = function() {
    var interests = this.balance * this.interest;
    this.balance += interests;
  };
  var account1 = Object.create(Account);
  account1.initCB("Alex", 100);
  var account2 = Object.create(Spare);
  account2.initCE("Marco", 50, 0.05);
  console.log("Here is the inital state of the accounts :");
  console.log(account1.describe());
  console.log(account2.describe());
  var amount = Number(prompt("Enter the amount to transfer :"));
  account1.debit(amount);
  account2.credit(amount);
  account2.addInterests();
  console.log("Here is the total after transfer and interests :");
  console.log(account1.describe());
  console.log(account2.describe());




// CLASSES
// kind of special functions; classes cannot be called before it appears in the code (such as functions)

  
  // syntax example
  class Rectangle {
    constructor(hauteur, largeur) {
      this.hauteur = hauteur;
      this.largeur = largeur;
    }
  }

  // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes





// REGEXP 
// regular expression object for matching text with a pattern


  /abc/; // Find strings containing "abc"

  /^abc/; // Find strings starting with "abc"

  /abc$/; // Find strings ending with "abc"

  /^abc.*abc$/; // Find strings starting with "abc" and ending with "abc"
  
  /[abc]/; // Find any characters between the brackets
  
  /[^abc]/; // Find any character NOT between the brackets
  
  /[a-c]/; // Find any letters between a and c

  /[a-z]/; // Find any letters in lowercase
  
  /[A-C]/; // Find any letters between A and C

  /[A-Z]/; // Find any letters in uppercase
  
  /[0-9]/; // Find any digits between the brackets; similar to \d
  
  /[^0-9]/; // Find any non-digit between the brackets; similar to \D
  
  /(abc|xyz)/; // Find any alternatives separated with |
  
  /\d/; // Find a digit; similar to [0-9]

  /\D/; // Find a non digit; similar to [^0-9]
  
  /\s/; // Find a whitespace character

  /\S/; // Find anything but a whitespace character
  
  /\w/; // Find any alphanumeric character (and underscore); similar to [A-Za-z0-9_]

  /\W/; // Find any non-alphanumeric character; opposite of \w

  /\n/; // Find a newline

  /\t/; // Find a tab
  
  /n+/; // Matches any string that contains at least one n
    
  /n*/; // Matches any string that contains zero or more occurrences of n
    
  /n?/; // Matches any string that contains zero or one occurrences of n

  /a{2}/; // find strings with 2 a

  /a{2,5}/; // find strings with 2 to 5 a

  /a{3,}/; // find strings with 3 or more a
    
  /test/i; // Perform case-insensitive matching; meaning upper or lowercased Test, TEST, tEST, etc.
  
  /test/g; // Perform a global match (find all matches rather than stopping after the first match)
  
  /test/m; // Perform multiline matching

  /./; // anything 


  // Special characters to be escaped
  // \ / [ ] ( ) { } ? + * | . ^ $
  
  
  // The test() method searches a string and return true or false
  /me/i.test("Am I in this string?"); // false
  /am/i.test("I am in this string!"); // true
  
  
  // The exec() method searches a string and return the found text or null
  /me/i.exec("Am I in this string?"); // null
  /am/i.exec("I am in this string!"); // 'am'


  // The match() method uses an expression to search for a match and return that match
  "try to find me".match(/me/i); // "me"
  
  
  // The search() method uses an expression to search for a match, and returns the position of the match.
  "try to find me".search(/me/i); // 12
  
  
  // The replace() method returns a modified string where the pattern is replaced.
  "try to find him".replace(/him/i, "me"); // try to find me


  // replace() works also like this
  "this code is shit".replace(/[aeiou]/gi, ''); // ths cd s sht
  


  
// DOM BASIS
// nodes are linked to html tags; 2 types: element () and textual ()
  
  
  // show html part in console; here body
  console.log(document.body);

  
  // element node check
  if (document.body.nodeType === document.ELEMENT_NODE) {
    console.log("Body is an element node");
  }

  
  // textual node check
  if (document.body.nodeType === document.TEXTUAL_NODE) {
    console.log("Body is a textual node");
  }

  
  // access element node first child (here body element)
  console.log(document.body.childNodes[0]); // notice that it will return #text because it counts the space before first html tag
  console.log(document.body.childNodes[1]); // return real first html tag
  
  
  // access element relationships (here header element); can be an element, text or comment...
  console.log(getElementsByTagName("header").childNodes); // returns an array of header child nodes
  console.log(getElementsByTagName("header").firstChild); // returns an header first child  
  console.log(getElementsByTagName("header").lastChild); // returns an header last child
  console.log(getElementsByTagName("header").hasChildNodes); // returns true if childnodes; false otherwise
  console.log(getElementsByTagName("header").nextSibling); // returns next node on same level
  console.log(getElementsByTagName("header").previousSibling); // returns previous node on same level
  console.log(getElementsByTagName("header").parentNode); //returns parent node


  // access the first element node
  console.log(getElementById("parent").firstElementChild); 


  // access actual child elements
  console.log(getElementsByTagName("header").children); // returns an array of children elements; no stupid text nodes

  
  // check the child list
  for (var i = 0; i < document.body.childNodes.length; i++) {
    console.log(document.body.childNodes[i]);
  }

  
  // check node parent
  var h1 = document.body.childNodes[1]; // must be done, otherwise h1 would be undefined
  console.log(h1.parentNode); // return body node


  
  
// DOM GET/QUERY
// all ways to reach html elements

  
  // multiple childNodes; not very effective
  console.log(document.body.childNodes[1].childNodes[1].childNodes[1]);

  
  // get Elements By Tag Name
  var elts = document.getElementsByTagName("h2"); // all h2 titles; elts is common abreviation for elements
  console.log(elts[0]); // first h2 title
  console.log(elts.length); // number of titles
  console.log(document.getElementsByTagName("h2")[0]); // faster way

  
  // get Elements By Class Name
  var elts = document.getElementsByClassName("elts");
  for (var i = 0; i < elts; i++) {
    console.log(elts[i]);
  }
  console.log(document.getElementsByClassName("elts")[0]) // faster way to get the first one

  
  // get Element By Id; pay attention to Element which is singular here
  console.log(document.getElementById("elt"));

  
  // css selector
  console.log(querySelectorAll("p")[1]); // second p
  console.log(querySelectorAll("#elt p")[1]); // second p of #elt
  console.log(querySelectorAll(".elts")[1]); // second tag of .elts

  
  // css selector; first only
  console.log(querySelector("p")); // first p only

  
  // return all html code
  console.log(document.body.innerHTML); // works with all above get commands

  
  // return html text without tags
  console.log(document.body.textContent); // works with all above get commands

  
  // get Attribute
  console.log(document.querySelector("a").getAttribute("href")); // return href attribute of first a

  
  // id, href and value attributes are direct; note that href will return full URL !
  console.log(document.querySelector("a").href);

  
  // check presence of attribute
  if (document.querySelector("a").hasAttribute("target")) {
    console.log("First a has target attribute");
  } else {
    console.log("First a has no target attribute");
  }

  
  // List of classes of a DOM element
  console.log(document.getElementById("elt").classList[0]);

  
  // check presence of a class in a DOM element
  if (document.getElementById("elt").classList.contains("main")) {
    console.log("Identified element has 'main' class");
  } else {
    console.log("Identified element has not 'main' class");
  }


  
  
// DOM CHANGE
// ways to change html elements; clear, add, etc.

  
  // add some html using innerHTML
  document.querySelector("p").innerHTML += "<span>!!!</span>"; // adds !!! to p

  
  // innerHTML is more often used to clear an element content
  document.querySelector("p").innerHTML = ""; // clear p

  
  // add some text using textContent
  document.querySelector("p").textContent += " more text in p";


  // create and or set an attribute
  document.querySelector("p").setAttribute("id", "title"); // first its name and secondly its value 

  
  // id, href, src and value are easier
  document.querySelector("p").id = "title";

  
  // standalone attributes
  document.querySelector("p").disabled = false; // or true
  document.querySelector("p").setAttribute("required", "false"); // other way to achieve it

  
  // classList
  var elt = document.querySelector("p");
  elt.classList.remove("main");
  elt.classList.remove("main", "other");
  elt.classList.add("title");
  elt.classList.add("title", "other");
  elt.classList.toggle("else");
  // would be the same as below
  document.querySelector("p").setAttribute("class", "title");


  // node contains
  var elt1 = document.querySelector(".elt1");
  var elt2 = document.querySelector(".elt2");
  elt1.contains(elt2); // returns true if elt2 is a child of elt1

  
  // adding an element
  var addedElt = document.createElement("span"); // span created
  addedElt.id = "added"; // define id
  addedElt.textContent = "Added span"; // define text content
  document.querySelector("p").appendChild(addedElt); // new element insertion

  
  // adding a node
  var addedElt = document.createElement("span"); // span created
  addedElt.id = "added"; // define id
  addedElt.appendChild(document.createTextNode("Added element")); // define text content
  document.querySelector("p").appendChild(addedElt); // new element insertion

  
  // add a node before another node
  var addedElt = document.createElement("span");
  addedElt.id = "added";
  addedElt.textContent = "Added element";
  document.querySelector("p").insertBefore(addedElt, document.getElementById("existing-element"));

  
  // more accurate node position with insertAdjdacentHTML; insertAdjacentElement as well !
  document.querySelector("p").insertAdjacentHTML('beforeBegin', '<span id="added">Added element</span>'); // before element itself (outside)
  document.querySelector("p").insertAdjacentHTML('afterBegin', '<span id="added">Added element</span>'); // just before firstchild
  document.querySelector("p").insertAdjacentHTML('beforeEnd', '<span id="added">Added element</span>'); // just after lastchild
  document.querySelector("p").insertAdjacentHTML('afterEnd', '<span id="added">Added element</span>'); // after element itself (outside)

  
  // replace a child node
  var addedElt = document.createElement("span");
  addedElt.id = "added";
  addedElt.textContent = "Added element";
  document.querySelector("p").replaceChild(addedElt, document.getElementById("existing-element")); // 'addedElt' replace existing-element

  
  // remove a child node
  document.querySelector("p").removeChild(document.getElementById("existing-element")); // remove existing-element


  // remove element
  var elt = document.querySelector("p");
  elt.parentNode.removeChild(elt);
  
  
  // swap 2 elements DOM position
  function swapElts(elt1, elt2) {
    var temp = document.createElement("p");
    elt1.parentNode.insertBefore(temp, elt1);
    elt2.parentNode.insertBefore(elt1, elt2);
    temp.parentNode.insertBefore(elt2, temp);
    temp.parentNode.removeChild(temp);
  }


  
    
// DOM STYLE
// give style to elements
  
  
  // style element
  var elt = document.querySelector("p");
  elt.style.color = "red";
  elt.style.margin = "50px";

  
  // style element with composed css properties
  var elt = document.querySelector("p");
  elt.style.backgroundColor = "red"; // used camelCase for composed properties
  elt.style.fontFamily = "Arial";

  
  // show style (only style within html, not external or head)
  var elt = document.querySelector("p");
  console.log(elt.style.color); // you can't get info about external that way

  
  // show style from external
  var eltStyle = getComputedStyle(document.querySelector("p"));
  console.log(eltStyle.color);

  
  // change multiple tags style
  var elts = document.querySelectorAll("p");
  for (var i = 0; i < elts.length; i++) {
    elts[i].style.color = "white";
    elts[i].style.backgroundColor = "red";
  }

  
  // get style external
  var content = document.querySelector("p");
  console.log(getComputedStyle(content).height);
  console.log(getComputedStyle(content).width);

  
  // add list with measures of another tag
  var styleElement = getComputedStyle(document.getElementById("content"));
  var listElt = document.createElement("ul");
  var lengthElt = document.createElement("li");
  lengthElt.textContent = "Length : " + styleElement.width;
  var heightElt = document.createElement("li");
  heightElt.textContent = "Height : " + styleElement.height;
  listElt.appendChild(heightElt);
  listElt.appendChild(lengthElt);
  document.getElementById("info").appendChild(document.createTextNode("Info about element"));
  document.getElementById("info").appendChild(listElt);


  // check media query in JS
  if (window.matchMedia("(min-width: 768px)").matches) {
    // do something when window is wider (equal to) than 768px
  }

  
  
  
// DOM EVENTS
// help to react to user's actions
  
  
  // monitor events; use window for example
  monitorEvents(); // write it in the console


  // add an event
  document.getElementById("button").addEventListener("click", function() {
    console.log("Click !");
  });
  
  
  // remove an event; function can't be anonymous
  document.getElementById("button").removeEventListener("click", namedFunction);


  // add event (remove on click) using class names
  var remove = document.getElementsByClassName("remove");
  for (i=0; i<remove.length; i++) {
    remove[i].addEventListener("click", function () {
      this.parentNode.remove();
    });
  }
  
  
  // get event type and target content of clicked element
  document.getElementById("button").addEventListener("click", function (e) {
    console.log("Event :" + e.type + ", target text :" + e.target.textContent);
  });


  // get event type and target content of event handler element
  document.getElementById("button").addEventListener("click", function (e) {
    console.log("Event :" + e.type + ", target text :" + e.currentTarget.textContent);
  });


  // add event with external function pointing to clicked element
  document.querySelector("button").addEventListener("click", functionName);
  function functionName(e) {
    e.target.style.color = "red";
  }
  
  
  // keypress event returning the pressed key (only for characters)
  document.addEventListener("keypress", function (e) {
      console.log("Key: " + String.fromCharCode(e.charCode)); // charCode deprecated
      console.log("Key: " + e.key);
  });
  
  
  // event type on pressed key; work also with "keyup"
  document.addEventListener("keydown", function (e) {
    console.log("Event: " + e.type);
  });
  
  
  // Wait until the page is fully loaded to make an action
  window.addEventListener("load", function() {
    console.log("Page fully loaded");
  });
  
  
  // warning before leaving page or tab
  window.addEventListener("beforeunload", function (e) {
    var message = "We are chill here !";
    e.returnValue = message; // usual confirmation
    return message; // confirmation for some browsers
  });
  
  
  // stop propagation; propagation goes from child to parents
  document.getElementById("propa").addEventListener("click", function (e) {
    console.log("button manager");
    e.stopPropagation();
  });

  // set propagation from parents to child (capturing); really useful for similar events for multiple DOM elements superposed
  document.getElementById("propa").addEventListener("click", function () {
    console.log("button manager")
  }, true); // default value is false (child to parents)
  
  
  // prevent default behavior
  document.getElementById("forbidden").addEventListener("click", function (e) {
    console.log("Keep on studying the course instead");
    e.preventDefault(); // cancel the link navigation
  });
  
  
  // one button count the clicks and another one disables the counting
  var count = 0;
  function e () {
    count++;
    document.getElementById("clickCounter").textContent = count;
  }
  document.getElementById("clicker").addEventListener("click", e);
  document.getElementById("disable").addEventListener("click", function () {
    document.getElementById("clicker").removeEventListener("click", e);
  });
  
  
  // get pressed key and change background color accordingly
  var Elts = document.getElementsByTagName("div");
  var color = "";
  document.addEventListener("keypress", function (e) {
    switch (e.charCode) {
      case 98:
        color = "blue";
        break;
      case 103:
        color = "green";
        break;
      case 114:
        color = "red";
        break;
      case 121:
        color = "yellow";
        break;
      default:
        console.log("Wrong key");
    }
    for (i=0; i<Elts.length; i++) {
      Elts[i].style.backgroundColor = color;
    }
  });
  

  // listen to arrow keys pressed and move accordingly
  var Elt = document.getElementById("ball");
  document.addEventListener("keydown", function (e) {
    switch (e.keyCode) {
      case 37: // left
        Elt.style.left -= 10;
        break;
      case 38: // up
        Elt.style.top -= 10;
        break;
      case 39: // right
        Elt.style.right -= 10;
        break;
      case 40: // down
        Elt.style.bottom -= 10;
        break;
      default:
        console.log("Wrong key");
    }
  });

  
  // Add li to ul with prompt and change those with click
  document.querySelector("button").addEventListener("click", function() {
    var dessert = prompt("type your dessert");
    var newElt = document.createElement("li");
    newElt.textContent = dessert;
    newElt.addEventListener("click", function() {
      var newName = prompt("Change dessert name of ", this.textContent);
      this.textContent = newName;
    });
    document.getElementById("desserts").appendChild(newElt);
  });
  



// DOM FORMS 
// Get values, check values, 


  // Prevent form submit; so no reload page anymore
  document.querySelector("form").addEventListener("submit", function (e) {
    e.preventDefault();
  });


  // Get value of an input
  var getValue = document.getElementsByTagName("input").value;
  console.log(getValue); // log input value


  // Set value of an input
  document.getElementsByTagName("input").value = "Hello"; // input value is now 'hello';


  // Check form elements
  var form = document.querySelector("form");
  console.log(form.elements.length); // number of inputs inside form
  console.log(form.elements[0].name); // first input name
  console.log(form.elements.mdp.type); // mdp input type


  // Put focus or remove it
  document.querySelector("input").focus(); 
  document.querySelector("input").blur(); 


  // Add event with focus on input element or blur
  document.querySelector("input").addEventListener("focus", function() { // just replace with "blur"
    document.querySelector("input").style.color = "red";
  });


  // Add event when a checkbox is checked or unchecked
  document.querySelector("input").addEventListener("change", function () {
    console.log("checkbox checked : " + e.target.checked); // true of false if checked or unchecked
  });


  // Event when radio is changed to return value
  for (i = 0; i < document.querySelectorAll("input").length; i++) {
    document.querySelectorAll("input")[i].addEventListener("change", function (e) {
      console.log("chosen radio input : " + e.target.value); // returns value attribute of the new chosen radio input
    });
  }


  // Event when dropping list option is changed
  document.querySelector("select").addEventListener("change", function (e) {
    console.log("Option selected from list : " + e.target.value); // returns value attribute of the new chosen option
  });


  // Validation on submitting with submit event
  document.querySelector("form").addEventListener("submit", function(e) {
    if (e.target.value.indexOf("http://") === -1) {
      console.log("not an URL !");
    }
  });


  // Validation while typing with input event
  document.querySelector("form").addEventListener("input", function (e) {
    if (e.target.value.length < 8) {
      console.log("Password too short");
    }
  });


  // Validation when input loses focus
  document.querySelector("form").addEventListener("blur", function(e) {
    if (e.target.value.indexOf("@") === -1) {
      console.log("email adress invalid");
    }
  });


  // Check passwords
  document.querySelector("form").addEventListener("submit", function (e) {
    var pass1 = document.getElementById("pass1");
    var pass2 = document.getElementById("pass2");
    var info = document.getElementById("infoPass");
    if (pass1.value !== pass2.value) { // if passwords are different
      info.innerHTML += "The passwords are not the same. Please try again. </br>";
    }
    if (pass1.value.length < 6) { // if password is shorter than 6 char
      info.innerHTML += "The password must contain at least 6 characters. </br>"
    }
    if (!/[0-9]/.test(pass1.value)) { // if no digit
      info.innerHTML += "The password must have at least one number. </br>";
    }
    if (pass1.value === pass2.value && pass1.value.length >=6 && /[0-9]/.test(pass1.value)) { // if all true
      info.innerHTML = "Correct Password !"
    }
    e.preventDefault();
  });


  // Select an option and make a list appear accordingly
  var houses = [ // array of object
    {
      code: "ST",
      name: "Stark"
    },
    {
      code: "LA",
      name: "Lannister"
    },
    {
      code: "BA",
      name: "Baratheon"
    },
    {
      code: "TA",
      name: "Targaryen"
    }
  ];
  function getChar(houseCode) { // check code and return names
    switch (houseCode) {
    case "ST":
      return ["Eddard", "Catelyn", "Robb", "Sansa", "Arya", "Jon Snow"];
    case "LA":
      return ["Tywin", "Cersei", "Jaime", "Tyrion"];
    case "BA":
      return ["Robert", "Stannis", "Renly"];
    case "TA":
      return ["Aerys", "Daenerys", "Viserys"];
    default:
      return [];
    }
  }
  for (i = 0; i < houses.length; i++) { // create form list
    var option = document.createElement("option");
    option.innerHTML = houses[i].name;
    option.setAttribute("value", houses[i].code);
    document.getElementById("house").appendChild(option);
  }
  document.getElementById("house").addEventListener("change", function (e) { // create list with names linked to code
    var char = getChar(e.target.value);
    document.getElementById("char").innerHTML = "";
    for (j = 0; j < char.length; j++) {
      var li = document.createElement("li");
      li.innerHTML = char[j];
      document.getElementById("char").appendChild(li);
    }
  });


  // Get suggestions and select one
  var countryList = [
    "Afghanistan",
    "Afrique du Sud",
    "Albanie",
    "Algérie",
    "Allemagne",
    "Andorre",
    "Angola",
    "Anguilla",
    "Antarctique",
    "Antigua-et-Barbuda",
    "Antilles néerlandaises",
    "Arabie saoudite",
    "Argentine",
    "Arménie",
    "Aruba",
    "Australie",
    "Autriche",
    "Azerbaïdjan"
];
var country = document.getElementById("pays");
var suggestions = document.getElementById("suggestions")
country.addEventListener("input", function (e) { // when typing
    suggestions.innerHTML = "";
    for (i = 0; i < countryList.length; i++) { 
        if (countryList[i].indexOf(e.target.value) !== -1) { // check if country name have typed letters
            var suggest = document.createElement("div");
            suggest.classList.add("suggestion");
            suggest.innerHTML = countryList[i];
            suggestions.appendChild(suggest); // add true elements as suggestions
            suggestions.addEventListener("click", function(f) { // on click on element, put that element in input
                country.value = f.target.textContent;
                suggestions.innerHTML = "";
            });
        }
    }
});




// DOM ANIMATIONS 
// All animations; use intervals for basics; CSS whenever you can; requestAnimationFrame() for the rest


  // Set interval; can define an end of it
  setInterval(function() {console.log("hello")}, 1000); // log "hello" every second


  // Clear interval; you must name your setInterval() in a var to be able to use clearInterval()
  var varSetInterval = setInterval(function() {console.log("hello")}, 1000);
  clearInterval(varSetInterval); // stops interval


  // Set timeout; 
  setTimeout(function() {console.log("hello")}, 2000); // starts log after 2sec
  

  // Clear timeout; you must name your setTimeout() in a var to be able to use clearTimeout()
  var varSetTimeout = setTimeout(function() {console.log("hello")}, 1000);
  clearTimeout(varSetTimeout); // stops timeout


  // Set timeout in a loop; tricky because you need to copy the i otherwise it will log only last i value
  var time = 10;
  for (var i = 1; i <= time; i++){
    (function(copy){
      setTimeout(function() { console.log(copy); }, 1000 * i);
    })(i);
  }


  // Request animation frame; 
  function animate() {
    // animation code...
    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);


  // Cancel animation frame; you must name your requestAnimationFrame() in a var to be able to use cancelAnimationFrame()
  cancelAnimationFrame(varRequestAnimationFrame)


  // reload page
  location.reload(true);

  // Change url
  window.location.replace("new url");

  // Get window sizes
  window.innerWidth;
  window.innerHeight;

  // Get window scrolls
  window.scrollX;
  window.scrollY;

  // Get current url
  document.URL;

  // Highlight current page
  document.querySelector(".navbar a[href*='" + location.pathname + "']").classList.add("active");

  
  // Start timer and be able to pause/start
  var start = document.getElementById("start");
  var stop = document.getElementById("stop");
  var span = document.getElementById("time");
  var time = 0;
  span.innerHTML = time;
  start.addEventListener("click", function() { // on start
    stop.style.display = "block";
    start.style.display = "none";
    setTime = setInterval(function() {
      time ++;
      span.innerHTML = time;
    }, 1000);
  });
  stop.addEventListener("click", function() { // on stop
    start.style.display = "block";
    stop.style.display = "none";
    clearTimeout(setTime);
  });


  // Rebounding ball with start/stop animation
  var box = document.getElementById("box");
  var ball = document.getElementById("ball"); // #ball must be position: relative and left: 0;
  var start = document.getElementById("start");
  var stop = document.getElementById("stop");
  var ballWidth = parseFloat(getComputedStyle(ball).width);
  var direction = 1;
  function moveBall() {
    var xBall = parseFloat(getComputedStyle(ball).left); // get ball position
    var xMax = parseFloat(getComputedStyle(box).width); // get max width
    if ((xBall + ballWidth > xMax) || (xBall < 0)) {
      direction *= -1; // change direction
    }
    ball.style.left = (xBall + 10 * direction) + "px"; // actual moving line
    animationId = requestAnimationFrame(moveBall);
  }
  start.addEventListener("click", function() { // starts animation
    stop.disabled = false;
    start.disabled = true;
    animationId = requestAnimationFrame(moveBall);
  });
  stop.addEventListener("click", function() { // stops animation
    start.disabled = false;
    stop.disabled = true;
    cancelAnimationFrame(animationId);
  });




// CANVAS
// Draw graphics via scripting to build graphs, modify photos or create animations


  // First point to your canvas element; by default canvas will be 300x150px
  var canvas = document.querySelector("#myCanvas");

  // Update canvas area with width and height
  canvas.width = 400;
  canvas.height = 400;

  // You can check if canvas are supported by the browser
  if (canvas.getContext) {console.log("We can use canvas here !");}

  // To be able to manipulate the points, you have to refer to the context
  var ctx = canvas.getContext("2d");


  // Draw rectangles by defining their x, y, width and height
  ctx.fillRect(0, 0, 10, 10); // here it is a 10px square starting at top left corner (0,0)
  ctx.strokeRect(0, 0, 10, 10); // here it is a 10px square outline starting at top left corner (0,0)
  ctx.clearRect(0, 0, 10, 10); // here it is a 10px transparent square starting at top left corner (0,0)


  // Draw paths to create other shapes
  ctx.beginPath(); // start drawing
  ctx.moveTo(75, 50); // move to a certain pos(x, y)
  ctx.lineTo(100, 75); // draws line from pos defined by moveTo to the ones in lineTo(x, y)
  ctx.fill(); // draws a solid shape from the path content area (need enough points)
  ctx.closePath(); // add a straight line to the path to close it
  ctx.stroke(); // draws shape by stroking its outline


  // Draw arcs to create rounded shapes
  ctx.beginPath(); // start drawing
  ctx.arc(0, 0, 10, 0, Math.PI*2, false); // x, y, radius, startAngle, endAngle, antiClockwise()
  ctx.fill(); // to make it a circle
  ctx.stroke(); // to make it a circled outline


  // Styles and colors to canvas
  ctx.fillStyle = "red"; // fill with red; can use other color such as hexa, rgb, rgba
  ctx.strokeStyle = "blue"; // stroke to blue
  ctx.globalAlpha = 0.2; // 0 to 1 total transparency
  ctx.lineWidth = 4; // sets width for lines
  ctx.lineCap = "round"; // default is "butt"; "round" goes a bit off rounded and "square" does the same squared
  ctx.lineJoin = "round"; // default is "miter"; "round" makes joint rounded and "bevel" makes joint flat
  ctx.setLineDash([10, 5]); // size of dash and spaces


  // Drawing text
  ctx.font = "48px Arial"; // sets font to be used
  ctx.textAlign = "left"; // start, left, center, right, end
  ctx.textBaseline = "middle"; // top, hanging, alphabetic, ideographic, bottom
  ctx.fillText(); // draws normal text
  ctx.strokeText();// draws text stroke


  // Drawing image
  var img = new Image();
  img.src = 'image.png';
  img.onload = function() { 
    ctx.drawImage(img, 0, 0); // img, x, y
    ctx.drawImage(img, 0, 0, 50, 50); // img, x, y, width, height
    ctx.drawImage(img, 10, 10, 10, 10, 0, 0, 50, 50); // img, imgX, imgY, imgW, imgH, x, y, width, height
  }




// FETCH
const getData = (url = "https://type.fit/api/quotes", options = {method: "GET"}) => {
  return fetch(url, options)
    .then((response) => {
      if (!response.ok) throw Error(response.statusText);
      return response.json();
    })
    .then((data) => data)
    .catch((error) => {
      console.error(error);
      throw error;
    })
    .finally(() => console.log('Fetch operation finished'));
}
getData().then(data => console.log(data)).catch(error => console.error(error));




// ASYNC/AWAIT
// best option to fetch data !
const getData = async (url = "https://type.fit/api/quotes", options = {method: "GET"}) => {
  try {
    const response = await fetch(url, options);
    if (!response.ok) throw Error(response.statusText);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    throw error;
  } finally {
    console.log("Fetch operation finished")
  }
};
getData().then(data => console.log(data)).catch(error => console.error(error));




// POST
const postData = async (
  url = "https://type.fit/api/quotes", 
  data = {}, 
  options = {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(data)}
) => {
  try {
    const response = await fetch(url, options);
    if (!response.ok) throw Error(response.statusText);
    const responseData = await response.json();
    return responseData;
  } catch (error) {
    console.error(error);
    throw error;
  } finally {
    console.log("Fetch operation finished")
  }
};
const dataToPost = {key: "value"};
postData("https://type.fit/api/quotes", dataToPost)
  .then(data => console.log(data))
  .catch(error => console.error(error));

// for formData
const dataForm = new FormData();
data.append('key', 'value');
const options = { method: "POST", body: dataForm };
postData("https://type.fit/api/quotes", {}, options)
  .then(responseData => console.log(responseData))
  .catch(error => console.error(error));




// PROMISE ALL
// when you need multiple calls
const getAllData = async (listOfURL, options = {method: "GET"}) => {
  try {
    const data = await Promise.all(
      listOfURL.map(async (url) => {
        const response = await fetch(url, options);
        if (!response.ok) throw Error(response.statusText);
        const singleData = await response.json();
        return singleData;
      })
    );
    return data;
  } catch (error) {
    console.log(error);
    throw error;
  }
};
getAllData([]).then(data => console.log(data)).catch(error => console.error(error));




// LOCALSTORAGE
// localStorage allows us to save data on the browser; it needs to be a string; window is optional


  // set item in localStorage
  localStorage.setItem("itemName", "itemValue");

  // get item in localStorage
  localStorage.getItem("itemName");

  // remove item in localStorage
  localStorage.removeItem("itemName");

  // clear localStorage
  localStorage.clear();

  // complex storage with JSON
  var obj = [1, 2, 3];
  localStorage.setItem("itemName", JSON.stringify(obj));
  JSON.parse(localStorage.getItem("itemName"));




// COOKIES
// 


  // set a cookie
  document.cookie = "cookieName=cookieValue";

  // set a cookie lasting more than a session
  document.cookie = "cookieName=cookieValue; expires=Wed, 19 Aug 2020 22:00:00 GMT"; // date must be in this format...

  // return list of cookies
  document.cookie.split(";"); // cookieName=cookieValue

  // check if a cookie is set
  document.cookie.split(";").indexOf("cookieName=cookieValue"); // true


  // create cookie function
  function createCookie(cookieName, cookieValue, daysToExpire) {
    var date = new Date();
    date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
    document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
  }
  createCookie("name", "value", 100);