d.aster/Front-End
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

hinzugefügt AJAX Aufruf auf ein API RestCountries

Browse Source
This commit is contained in:
David Aster 2022-11-10 08:26:44 +01:00
parent 7dfc3474dd
commit b26b9ed562
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
javascript/Javascript Expert/chapter16/index.html Normal file
View File

@ -0,0 +1,16 @@
<!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>Asyncronus Javascript</title>
</head>
<body>
<main class="container">
<div class="countries"></div>
<div class="images"></div>
</main>
<script src="script.js"></script>
</body>
</html>

38
javascript/Javascript Expert/chapter16/script.js Normal file
View File

@ -0,0 +1,38 @@
// 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;
});