39 lines
1.4 KiB
JavaScript
39 lines
1.4 KiB
JavaScript
// 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;
|
|
});
|