<div id="app" class="weatherApp l-stack">Checking the weather near you...</div>
 
<script>
var createWeatherApp = function (options) {

  // Default settings
  var defaults = {
    selector: '#app',
    weatherAPI: ' https://api.weatherbit.io/v2.0/current',
    weatherKey: '5503cec5734c4b79a0f908a36937391e',
    locationAPI: 'https://ipapi.co/json',
  }

  // Merge any user options into the defaults
  var settings = Object.assign(defaults, options);

  // Variables
  let city;
  let app = document.querySelector(settings.selector);

  // 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(settings.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(`${settings.weatherAPI}?${locationParameters}&key=${settings.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();
};

createWeatherApp();
 
// Example with options
// createWeatherApp({
//   selector: 'something-else'
// })

</script>