diff --git a/javascript/Javascript Expert/chapter12/setIntervalSetTimeout.js b/javascript/Javascript Expert/chapter12/setIntervalSetTimeout.js new file mode 100644 index 0000000..f6b45ca --- /dev/null +++ b/javascript/Javascript Expert/chapter12/setIntervalSetTimeout.js @@ -0,0 +1,16 @@ +const ingredients = ["olives", "spinach"]; + +const pizzaTimer = setTimeout( + (ingredient1, ingredient2) => + console.log(`Here is your Pizza with ${ingredient1} and ${ingredient2} :)`), + 3000, + ...ingredients +); // die Nachricht wird nach den vergangenen drei Sekunden gezeigt 3000ms +console.log("Waiting..."); + +if (ingredients.includes("spinach")) clearTimeout(pizzaTimer); + +setInterval(() => { + const now = new Date(); + console.log(`${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`); +}, 1000); // jede Sekunde wird die derzeitige Zeit angezeigt diff --git a/javascript/Javascript Expert/chapter13/index.html b/javascript/Javascript Expert/chapter13/index.html new file mode 100644 index 0000000..a550cca --- /dev/null +++ b/javascript/Javascript Expert/chapter13/index.html @@ -0,0 +1,12 @@ + + + + + + + Advanced DOM and Events + + + + + diff --git a/javascript/Javascript Expert/chapter13/script.js b/javascript/Javascript Expert/chapter13/script.js new file mode 100644 index 0000000..4036ea6 --- /dev/null +++ b/javascript/Javascript Expert/chapter13/script.js @@ -0,0 +1,58 @@ +const objectOf = [ + { + id: 1213, + text: "1213 is the year that Pope Innocent III issues a charter, calling for the Fifth Crusade to recapture Jerusalem.", + }, + { + id: 1050, + text: "1050 is the year that Upon the death of Anund Jacob, he is succeeded by his brother Emund the Old as king of Sweden.", + }, + { + id: 529, + text: "529 is the year that the Benedictine Order is founded.", + }, + { + id: 1005, + text: "1005 is the year that Schaffhausen starts minting its own coins.", + }, + { + id: 1543, + text: "1543 is the year that the Japanese receive the first firearms from shipwrecked Portuguese.", + }, + { + id: 1203, + text: "1203 is the year that the Fleet of the crusaders enters the Bosphorus on June 23rd.", + }, + { + id: 1795, + text: "1795 is the year that the United States and Spain sign the Treaty of Madr, which establishes the boundaries between Spanish colonies and the United States on October 27th.", + }, + { + id: 1814, + text: "1814 is the year that Gervasio Antonio de Posadas becomes Supreme Director of Argentina on January 31st.", + }, + { + id: 1712, + text: "1712 is the year that the Treaty of Aargau is signed by Catholics and Protestants, introducing the Protestant faith into Switzerland.", + }, + { + id: 1316, + text: "1316 is the year that Battle of Manolada between the Burgundian and Majorcan claimants of the Principality of Achaea on July 5th.", + }, + { + id: 1155, + text: "1155 is the year that the Papal bull Laudabiliter gives the King of England lordship over Ireland.", + }, + { + id: 103, + text: "103 is the year that Emperor Trajan and Manius Laberius Maximus become Roman Consul.", + }, + { + id: 1019, + text: "1019 is the year that a treaty between Sweden and Norway is conducted at Kungälv.", + }, +]; + +objectOf.forEach(function (obj) { + console.log(`${obj["text"]}`); +}); diff --git a/javascript/Javascript Expert/chapter16/ajaxCall.js b/javascript/Javascript Expert/chapter16/ajaxCall.js new file mode 100644 index 0000000..cdf8b98 --- /dev/null +++ b/javascript/Javascript Expert/chapter16/ajaxCall.js @@ -0,0 +1,36 @@ +// const btn = document.querySelector(".btn-country"); +const countryContainer = document.querySelector(".countries"); +// const countryFlag = document.querySelector(".country-flag"); +// const flag = document.createElement("img"); +function renderCountry(data) { + const html = ` +
+ +
+

${data.name.common}

+

${data.region}

+

👫${( + +data.population / 1000000 + ).toFixed(1)} Mil

+ +
+
+`; + countryContainer.innerHTML += html; +} + +function getCountryData(country) { + const request = new XMLHttpRequest(); + request.open("GET", `https://restcountries.com/v3.1/name/${country}`); + request.send(); + console.log(request.responseText); + + request.addEventListener("load", function () { + const [data] = JSON.parse(this.responseText); + console.log(data); + renderCountry(data); + }); +} +getCountryData("austria"); +getCountryData("portugal"); +getCountryData("slovenia"); diff --git a/javascript/Javascript Expert/chapter16/index.html b/javascript/Javascript Expert/chapter16/index.html index b9b6be9..5723aba 100644 --- a/javascript/Javascript Expert/chapter16/index.html +++ b/javascript/Javascript Expert/chapter16/index.html @@ -11,6 +11,6 @@
- + diff --git a/javascript/Javascript Expert/chapter16/script.js b/javascript/Javascript Expert/chapter16/script.js deleted file mode 100644 index d8f807c..0000000 --- a/javascript/Javascript Expert/chapter16/script.js +++ /dev/null @@ -1,38 +0,0 @@ -// const btn = document.querySelector(".btn-country"); -const countryContainer = document.querySelector(".countries"); -// const countryFlag = document.querySelector(".country-flag"); -// const flag = document.createElement("img"); - -const request = new XMLHttpRequest(); -request.open("GET", "https://restcountries.com/v3.1/all"); -request.send(); -console.log(request.responseText); -let data; -let html; -request.addEventListener("load", function (el) { - data = JSON.parse(this.response); - data.forEach(element => { - // const flag = document.createElement("img"); - // flag.src = element.flags.png; - // countryFlag.append(flag); - // console.log(`${element.name.common} : ${element["population"]}`); - html += ` -
- -
-

${element.name.common}

-

${element.region}

-

👫${( - element.population / 1000000 - ).toFixed(1)} Mil

- -
-
- `; - - //

🗣️${element.languages[0].name}

- //

💰${element.currencies[0].name}

- console.log(element); - }); - countryContainer.innerHTML = html; -}); diff --git a/javascript/Javascript Expert/examples/index.html b/javascript/Javascript Expert/examples/index.html index ed2f673..cf57100 100644 --- a/javascript/Javascript Expert/examples/index.html +++ b/javascript/Javascript Expert/examples/index.html @@ -5,7 +5,7 @@ Event Listeners - +