firstExample.js

'use strict';

const btn = document.querySelector('.btn-country');
const countriesContainer = document.querySelector('.countries');

///////////////////////////////////////

const renderCountry = function(data, className = '') {
  const html = `
      <article class="country ${className}">
        <img class="country__img" src="${data.flag}" />
        <div class="country__data">
          <h3 class="country__name">${data.name}</h3>
          <h4 class="country__region">${data.region}</h4>
          <p class="country__row"><span>👫</span>${(+data.population / 1000000).toFixed(1)} people</p>
          <p class="country__row"><span>🗣️</span>${data.languages[0].name}</p>
          <p class="country__row"><span>💰</span>${data.currencies[0].name}</p>
        </div>
      </article>
  `;

  countriesContainer.insertAdjacentHTML('beforeend', html);
}

const renderError = function(msg) {
  countriesContainer.insertAdjacentText('beforeend', msg);
}

///////////////////////////////////////

const getJSON = function(url, errorMsg = 'Something went wrong') {
  return fetch(url)
    .then(res => {
      if (!res.ok) throw new Error(`${errorMsg} (${res.status})`);
      return res.json();
    })
}

///////////////////////////////////////

const whereAmI = function(lat, lng) {
  getJSON(`https://geocode.xyz/${lat},${lng}?geoit=json`, 'Problem w geocoding')
    .then(data => {
      console.log('data1', data);
      console.log(`You are in ${data.city}, ${data.country}`);
      return getJSON(`https://restcountries.eu/rest/v2/name/${data.country}`, 'Country not found')
    })
    .then(data => {
      console.log('data2', data[0]);
      renderCountry(data[0])
    })
    .catch(err => console.error(`${err.message}`))
    .finally(() => {
      countriesContainer.style.opacity = 1;
      btn.style.opacity = 0;
    })
}

btn.addEventListener('click', function() {
  whereAmI('52.508', '13.381');
})