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