Weather App

This app uses geolocation to determine your location, and then fetches a current weather report for your city, making use of the Open Weather API. If your OS or browser settings disallow geolocation, you will be informed of that and given the opportunity to change those settings so your weather report can be displayed. Based on your current weather conditions, the app displays the appropriate background image and weather icon. If your computer's current clock time falls during the evening or night, the app also darkens the weather background image.

JavaScript

//get date object
var date = new Date();
var hour = date.getHours();

jQuery(document).ready(function () {

  function getLocation() {
    //credit to W3schools.com for geolocation code
    //if a geolocation object exists...
    if (navigator.geolocation) {
      //call the object's getCurrentPosition() method; once a position is obtained, execute the callback function showPosition, and in the event a geolocation error occurs, execute the callback function showError
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
    //if a geolocation object does not exist...
    else {
      jQuery('#details-container').css('display', 'block');
      jQuery('.weather-title').html('<span>Geolocation is not supported by your browser.<span>');
      jQuery('#veil').css('display', 'none');
    }
  }

  //the callback function which uses the geolocation object to display the weather
  function showPosition(position) {

    jQuery('#details-container').css('display', 'block');

    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    var weatherURL = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=KEYGOESHERE";

    //get weather object from open weather api
    jQuery.getJSON(weatherURL, function (json) {

      jQuery('#toggle-temp').addClass('wpforms-submit').css('display', 'block');

      jQuery('.weather-title').html('<span> Current Weather Report for ' + json["name"] + ':' + '</span>');

      jQuery('.conditions').html('<span>' + json["weather"][0]["description"] + '</span>');

      var weatherID = json["weather"][0]["id"];
      var baseURL = "https://openweathermap.org/img/w/";

      //if it is night based on the date object, do the following...
      if ((hour >= 0 && hour <= 5) || (hour >= 18 && hour <= 23)) {
        console.log("It's night (b/t midnight and 5:59am or b/t 6pm and 11:59pm)");

        //display a semi-transparent black layer over the weather image for night effect
        jQuery('#veil').css('display', 'block');

        //dispay a different weather background image and weather icon for each of six weather categories
        switch (true) {
        case (weatherID >= 200 && weatherID <= 232): //thunderstorm
          jQuery('#weatherIcon').attr('src', baseURL + "11n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/thunderstorm1080x720.jpg)');
          break;
        case ((weatherID >= 300 && weatherID <= 321) || (weatherID >= 500 && weatherID <= 531)): //"drizzle" or "rain" respectively, using same pic
          jQuery('#weatherIcon').attr('src', baseURL + "09n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/rain1080x760.jpg)');
          break;
        case (weatherID >= 600 && weatherID <= 622): //snow
          jQuery('#weatherIcon').attr('src', baseURL + "13n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/snow1080x810.jpg)');
          break;
        case (weatherID >= 701 && weatherID <= 781): //mist, smoke, haze, sand/dust whirls, fog, dust, volcanic ash, squalls, tornado
          jQuery('#weatherIcon').attr('src', baseURL + "50n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/windmill1080x810.jpg)');
          break;
        case (weatherID === 800): //clear
          jQuery('#weatherIcon').attr('src', baseURL + "01n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/clear1080x720.jpg)');
          break;
        case (weatherID >= 801 && weatherID <= 804): //clouds
          jQuery('#weatherIcon').attr('src', baseURL + "03n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/cloudy1080x720.jpg)');
          break;
        }

        //if it is day based on the date object, do the following...
      } else {
        console.log("it's day");

        //dispay a different weather background image and weather icon for each of six weather categories
        switch (true) {
        case (weatherID >= 200 && weatherID <= 232): //thunderstorm
          jQuery('#weatherIcon').attr('src', baseURL + "11d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/thunderstorm1080x720.jpg)');
          break;
        case ((weatherID >= 300 && weatherID <= 321) || (weatherID >= 500 && weatherID <= 531)): //"drizzle" or "rain" respectively, using same pic
          jQuery('#weatherIcon').attr('src', baseURL + "09d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/rain1080x760.jpg)');
          break;
        case (weatherID >= 600 && weatherID <= 622): //snow
          jQuery('#weatherIcon').attr('src', baseURL + "13d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/snow1080x810.jpg)');
          break;
        case (weatherID >= 701 && weatherID <= 781): //mist, smoke, haze, sand/dust whirls, fog, dust, volcanic ash, squalls, tornado
          jQuery('#weatherIcon').attr('src', baseURL + "50d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/windmill1080x810.jpg)');
          break;
        case (weatherID === 800): //clear
          jQuery('#weatherIcon').attr('src', baseURL + "01d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/sunny1080x723.jpg)');
          break;
        case (weatherID >= 801 && weatherID <= 804): //clouds
          jQuery('#weatherIcon').attr('src', baseURL + "03d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/cloudy1080x720.jpg)');
          break;
        }
      }

      //convert source Kelvin temp to Fahrenheit and Celsius
      var kelvinTemp = json["main"]["temp"];
      var fahrTemp = Math.round(((kelvinTemp - 273.15) * (9 / 5)) + 32);
      var celsTemp = Math.round(kelvinTemp - 273.15);

      //display Fahrenheit temp by default
      jQuery('#temp-report').html("Temperature: " + fahrTemp + "°" + " F");

      //when the toggle-temp button is clicked, check to see if it reads Celsius or Fahrenheit
      jQuery('button#toggle-temp').click(function () {

        //if the button reads "Celsius"...
        if (jQuery('button#toggle-temp:contains(Celsius)').length !== 0) {
          //display the temp in Celsius
          jQuery('#temp-report').html('Temperature: ' + celsTemp + '°' + ' C');
          //make the button text read "to Fahrenheit"
          jQuery('button#toggle-temp').html('to Fahrenheit');
        }
        //if the button reads "Fahrenheit"...
        else if (jQuery('button#toggle-temp:contains(Fahrenheit)').length !== 0) {
          //display the temp in Fahrenheit
          jQuery('#temp-report').html('Temperature: ' + fahrTemp + '°' + ' F');
          //make the button text read "to Celsius"
          jQuery('button#toggle-temp').html('to Celsius');
        }
      });
    });
  }
  getLocation();

  //callback function which handles getGeolocation() errors    
  function showError(error) {
    //credit to W3schools.com for error handling
    jQuery('#toggle-temp').css('display', 'none');
    jQuery('#details-container').css('display', 'block');
    switch (error.code) {
    case error.PERMISSION_DENIED:
      jQuery('.weather-title').html('<span>Your settings denied the request for geolocation.  Please allow geolocation in your browser and/or OS settings so your local weather may be displayed.<span>');
      jQuery('#veil').css('display', 'none');
      break;
    case error.POSITION_UNAVAILABLE:
      jQuery('.weather-title').html('<span>Location information is unavailable, so the weather for your location cannot be displayed.<span>');
      jQuery('#veil').css('display', 'none');
      break;
    case error.TIMEOUT:
      jQuery('.weather-title').html('<span>The request to get your location timed out, so weather for your location cannot be displayed.<span>');
      jQuery('#veil').css('display', 'none');
      break;
    case error.UNKNOWN_ERROR:
      jQuery('.weather-title').html('<span>An unknown error occurred, so weather for your location cannot be displayed. <span>');
      //    jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/06/geolocation1080x720.jpg)');
      jQuery('#veil').css('display', 'none');
      break;
    }
  }

  //prevent default api service failure message from flashing before a successful api call can complete and populate the widget
  setTimeout(function () {

    //detect if .weather-title has been populated due to successful api call or geolocation error info
    if (jQuery('.weather-title').text().length === 0) {

      jQuery('.weather-title').html('<span>An API service required to fetch the weather for your location is temporarily unavailable.  Please try again later.<span>');
    }
  }, 1000);
});

HTML

<section id="weather-report">
	<section id="veil">
	</section>
	<div id="details-container">
		<h3 class="weather-title"></h3>
		<div class="flex-container">
			<h3 class="conditions"></h3>
		</div>
		<div class="flex-container">
			<p id="temp-report"></p>
		</div>
		<div class="flex-container">
			<button id="toggle-temp">to Celsius</button>
		</div>
		<div class="flex-container">
			<img id="weatherIcon" src="">
		</div>
	</div>
	<section id="default-background">
	</section>
</section>

CSS

  .weather-title {
    text-align: center;
    padding-top: 15px;
  }  
  .conditions {
    text-align: center;
    text-transform: capitalize;
  } 
  .flex-container {
    display: flex;
    justify-content: center;
    width: 100%;
  } 
  #weather-report {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    min-height: 720px;
    position: relative;
    border-radius: 10px;
    background-position: center;
  } 
  #veil,
  #default-background {
    width: 100%;
    min-height: 720px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
  }  
  #veil {
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
    display: none;
  }  
  #default-background {
    z-index: -1;
    background: url(https://resultswebsitedesign.com/wp-content/uploads/2017/06/geolocation1080x720.jpg) center;
    display: block;
  }
  #details-container {
    /*prevent display until it is known whether geolocation is allowed*/
    display: none;
    position: relative;
    /*position weather details in layer above veil*/
    z-index: 2;
    max-width: 500px;
    background: rgba(255, 255, 255, .5);
    padding: 0 10px;
    margin: 0 auto;
    border-radius: 10px;
    top: 15px;
  } 
  #toggle-temp {
    /*prevent display until it is known whether geolocation is allowed*/
    display: none;
  }

Working to Raise Your Bottom Line.

Results Website Design

| 2110 Iris Drive

| Columbia MO, 65202

| scott@resultswebsitedesign.com

| 314.448.7315