const countryContainer = document.querySelector(".countries");
const request = fetch("https://restcountries.com/v3.1/name/slovenia");
console.log(request);

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;
}
// man kann einen ajax Aufruf Mithilfe Promise Datastruktur ausgeführt werden
const countryData = function (country) {
  fetch(`https://restcountries.com/v3.1/name/${country}`) // die Metzhode fetch gibt Promise DS zurück
    .then(response => {
      console.log(response);
      return response.json(); // die Methode gibt pending Promise zurück, und wenn die Daten erfolreich erhaltet werden,
      // wird ein Promise mit json Daten zurück gegeben
    })
    .then(data => {
      // die zweite Methode then() behandelt dann ein JSON, in unserem Fall bekommt man schon geparsed JSON Data
      console.log(data[0]);
      renderCountry(data[0]);
      const neighbour = data[0].borders[0];
      if (!neighbour) return;
      return fetch(`https://restcountries.com/v3.1/alpha/${neighbour}`);
    })
    .then(response => {
      response.json();
    })
    .then(data => renderCountry(data, "neighbour"));
};

countryData("germany");