<div id="app" class="weatherApp l-stack">Checking the weather near you...</div>
 
<script>

  // Variables
  let locationAPI = 'https://ipapi.co/json'
  let city;

  let weatherAPI = ' https://api.weatherbit.io/v2.0/current'
  let weatherKey = '5503cec5734c4b79a0f908a36937391e'

  let app = document.querySelector('#app');

  // Methods
  function renderWeather(prop) {
    app.innerHTML = `
    <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg> ${city}</p>
    <div class="weatherGrid">
      <img src="https://www.weatherbit.io/static/img/icons/${prop.weather.icon}.png" alt="${prop.weather.description}"></img>
      <div>
        <p class="temperature"><strong>${prop.app_temp}º C</strong></span>
        <p class="description">${prop.weather.description}</p>
      <div>
    </div>`
  }

  function getWeather () {
    fetch(locationAPI).then(function (response) {
      if (response.ok) {
        return response.json();
      } else {
        return Promise.reject(response);
      }
    }).then(function (locationData) {
      city = locationData.city;
      let lat = locationData.latitude;
      let lon = locationData.longitude;
      let locationParameters = `&lat=${lat}&lon=${lon}`;
      return fetch(`${weatherAPI}?${locationParameters}&key=${weatherKey}`);
    }).then(function (response) {
      if (response.ok) {
        return response.json();
      } else {
        return Promise.reject(response);
      }
    }).then(function (weatherData) {
      let userWeather = weatherData.data[0];
      renderWeather(userWeather); 
    }).catch(function (error) {
      console.warn(error);
    });
  }

  // Inits and listeners
  getWeather();

</script>