hinzugefügt mehrere AJAX Aufrufe, optimisierung des Codes, renderCountry Methode, die nur nach einem Render in die Webseite ausgeführt wird
This commit is contained in:
David
parent
b26b9ed562
commit
636f5a34a1
@ -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
|
||||
12
javascript/Javascript Expert/chapter13/index.html
Normal file
12
javascript/Javascript Expert/chapter13/index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Advanced DOM and Events</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
58
javascript/Javascript Expert/chapter13/script.js
Normal file
58
javascript/Javascript Expert/chapter13/script.js
Normal file
@ -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"]}`);
|
||||
});
|
||||
36
javascript/Javascript Expert/chapter16/ajaxCall.js
Normal file
36
javascript/Javascript Expert/chapter16/ajaxCall.js
Normal file
@ -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 = `
|
||||
<article class="country">
|
||||
<img class="country__img" src="${data.flags.png}" />
|
||||
<div class="country__data">
|
||||
<h3 class="country__name">${data.name.common}</h3>
|
||||
<h4 class="country__region">${data.region}</h4>
|
||||
<p class="country__row"><span>👫</span>${(
|
||||
+data.population / 1000000
|
||||
).toFixed(1)} Mil</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
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");
|
||||
@ -11,6 +11,6 @@
|
||||
<div class="countries"></div>
|
||||
<div class="images"></div>
|
||||
</main>
|
||||
<script src="script.js"></script>
|
||||
<script src="ajaxCall.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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 += `
|
||||
<article class="country">
|
||||
<img class="country__img" src="${element.flags.png}" />
|
||||
<div class="country__data">
|
||||
<h3 class="country__name">${element.name.common}</h3>
|
||||
<h4 class="country__region">${element.region}</h4>
|
||||
<p class="country__row"><span>👫</span>${(
|
||||
element.population / 1000000
|
||||
).toFixed(1)} Mil</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
|
||||
// <p class="country__row"><span>🗣️</span>${element.languages[0].name}</p>
|
||||
// <p class="country__row"><span>💰</span>${element.currencies[0].name}</p>
|
||||
console.log(element);
|
||||
});
|
||||
countryContainer.innerHTML = html;
|
||||
});
|
||||
@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Event Listeners</title>
|
||||
<script src="script.js"></script>
|
||||
<script src="ajaxCall.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user