// 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");