37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
// 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[0]);
|
|
});
|
|
}
|
|
getCountryData("austria");
|
|
getCountryData("portugal");
|
|
getCountryData("slovenia");
|