console.clear();
// Console tonen door F12
console.log("DOM en events");

let getallen = [14, 2, 1, 5, 3, 7, 12, 8];
getallen.sort();
console.log(getallen);
getallen.sort((a, b) => a - b);
console.log(getallen);
getallen.sort((a, b) => b - a);
console.log(getallen);
let getallen2 = [14, 2, 1, 5, 3, 7, 12, 8];
getallen2.sort(function(a, b) {
  if (a > b) {
    console.log(`${a} > ${b}`);
    return -1;
  } else if (a < b) {
    console.log(`${a} < ${b}`);
    return 1;
  } else {
    console.log(`${a} = ${b}`);
    return 0;
  }
});
console.log(getallen2);


class Artikel {
  constructor(naam, prijs) { // geen keyword function
    this.naam = naam;
    this.prijs = prijs;
  }
  toString() {
    return `${this.naam}: ${this.prijs}`;
  }
}

artikelen = [new Artikel("pen", 1.5), new Artikel("gum", 0.5), new Artikel("potlood", 0.7)];
artikelen.sort();
console.table(artikelen);
artikelen.sort((a, b) => a.naam < b.naam ? 1 : a.naam > b.naam ? -1 : 0);
console.log(artikelen.join("\n"));
artikelen.reverse();
console.log(artikelen.join("\n"));


// HTMLCollection omzetten naar array: Array.from(collection);
// Ook vanaf element te gebruiken.


test = document.getElementsByTagName("li");
for (let x of test) {
  console.log(x.textContent);
}
console.log(test[1]);


test = document.getElementsByClassName("menu");
for (let x of test) {
  console.log(x.textContent);
}
console.log(test[0].getElementsByTagName("ul")[0]);


test = document.querySelector("div span");
console.log(test.textContent);
test = document.querySelectorAll("li");
console.log(test[2].textContent);


// DOM wijzigen
function createLink(href, tekst) {
  var link = document.createElement("a"); // maak element
  var text = document.createTextNode(tekst); // maak tekst
  link.appendChild(text); // voeg tekst toe aan element
  link.setAttribute("href", href);
  // geef attribuut aan element
  return link;
}
var mijnLink = createLink("http://www.vijfhart.nl", "Vijfhart");
var result = document.getElementById("result");
result.appendChild(mijnLink);


var inhoud = "<a href='http://www.vijfhart.nl'>Vijfhart 2</a>";
result2.innerHTML = inhoud;


/* Opdracht pagina 116 */
var lijstje = ["Bananen", "Appels", "Bessen", "Kersen"];
var lijst = document.getElementById("lijst");

for (let x of lijstje) {
  var link = document.createElement("li"); // Maak element <li>
  var text = document.createTextNode(x); // Maak tekst die tussen <li> en </li> moet komen 
  link.appendChild(text); // Zet inhoud/tekst tussen <li> en </li>
  lijst.appendChild(link); // Zet resultaat vorig statement tussen <ul> en </ul>
}


var lijst2 = document.getElementById("lijst2"); // Zoek id lijst2 in HTML
lijst2.innerHTML = "<li>Sate</li><li>Kipfilet</li>"; // Zet dit in gevonden HTML element


var arrayLijst = ["Brood", "Sla", "Suiker", "Vis"];
lijst3.innerHTML = arrayLijst.map((a, i) => `<li data-nr="${i}">${a}</li>`)
  .join("\n"); // \n is niet nodig
console.log(lijst3);



function createList(elements) {
  let list = document.createElement("ul");
  for (let x of elements) {
    var link = document.createElement("li"); // Maak element <li>
    var text = document.createTextNode(x); // Maak tekst die tussen <li> en </li> moet komen 
    link.appendChild(text); // Zet inhoud/tekst tussen <li> en </li>
    list.appendChild(link); // Zet resultaat vorig statement tussen <ul> en </ul>
  }
  return list;
}

let myList = createList(arrayLijst);
document.body.appendChild(myList);

let myList2 = createList(["Kat", "Hond", "Paard"]);
document.body.appendChild(myList2);


/*
knop.addEventListener("click", function() {
  result.value += "A";
}, false); // false (propagatie) is default, mag dus weg gelaten worden

knop.addEventListener("click", function() {
  resultje.value += "B";
});

result.onfocus = function() {
  this.style.color = "red";
}
*/

// event : preventDefault()


// Controleer ingevoerde postcode
var postcode = document.getElementById("postcode");
postcode.addEventListener("change", function(e) {
  var re = new RegExp(e.target.pattern);
  var text = e.target.value;
  var label = document.querySelector("[for='postcode']");
  if (re.test(text)) {
    label.textContent = "geldige postcode";
    label.style.color = "inherit";
  } else {
    label.textContent = "ongeldige postcode";
    e.target.focus();
    e.target.value = "";
    label.style.color = "red";
  }
});



var test = document.getElementById("test123");
test.classList.add("sterk");
test.classList.remove("rood");
if (test.classList.contains("sterk")) {
  test.classList.replace("sterk", "onderstreept");
}
test.classList.toggle("onderstreept"); // zet aan/uit


// Opdracht pagina 129
var knop = document.getElementById("knop");
knop.onclick = function() {
  if (tekst.classList.contains("zichtbaar")) {
    tekst.classList.replace("zichtbaar", "onzichtbaar");
    knop.textContent = "toon";
  } else {
    tekst.classList.replace("onzichtbaar", "zichtbaar");
    knop.textContent = "verberg";
  }
  //tekst.classList.toggle("onzichtbaar");
}


// Opdracht pagina 130
//var input = document.getElementById("invoer");
var input = document.querySelector("#invoer");
//invoer.value="testje";
invoer.addEventListener("change", function(e) {
  let tekst = e.target.value;
  tekst = tekst.toUpperCase();
  //console.log(tekst);
  var output = document.getElementById("uitvoer");
  output.textContent = tekst;
  input.value = ""; // null
});


// Opdracht pagina 131
let namen = {
  values: ["jan", "pier", "joris"],
  add: function(value) {
    if (this.values.indexOf(value) == -1) {
      this.values.push(value);
    }
  },
  toList: function() {
    this.values.sort();
    return this.values.map(val => `<li>${val}</li>`).join("");
  }
};

namen.add("corneel");
console.log(namen.values);
console.table(namen.values);
console.table(namen.toList());

let invoer2 = document.getElementById("namen");
invoer2.addEventListener("change",
  function(e) {
    let naam = e.target.value;
    let lijst = document.querySelector("ul"); // de eerste ul wordt genomen
    namen.add(naam);
    lijst.innerHTML = namen.toList();
    e.target.value = null;
  })


// Opdracht pagina 132
let getal1 = document.getElementById("getal1");
let getal2 = document.getElementById("getal2");
let som = document.getElementById("som");

let x = 0;
let y = 0;

function verwerkGetal(e) {
  let inhoud = e.target.value;
  let getal = Number.parseFloat(inhoud);
  if (e.target.id === "getal1") {
    x = getal;
  } else if (e.target.id === "getal2") {
    y = getal;
  }
  som.textContent = `De uitkomst is ${x+y}`;
}

getal1.addEventListener("change", verwerkGetal);
getal2.addEventListener("change", verwerkGetal);