cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container" id="container">
  <div class="weatherinfo">
    <section class="error">
      <p><span id="error"></span></p>
    </section>
    <section class="header clearfix">
      <h1 class="temp">
        <span id="temp"></span><sup>&#176;<span id="temp-type">F</span></sup>    
      </h1>
      <p class="cond-icon">
        <span id="cond-icon"></span>
      </p>
    </section>
    <section class="info-basic">
      <p class="location clearfix">
        <span id="location"></span>
        <span id="reload">&circlearrowleft;</span>
        <span id="time"></span>
      </p>
    </section>
    <section class="info-advanced" id="info-advanced">
      <hr>
      <p class="conditions-desc">Currently: <span id="conditions-desc"></span></p>
      <p class="sunrise">Sunrise: <span id="sunrise"></span></p>
      <p class="sunset">Sunset: <span id="sunset"></span></p>
      <p class="pressure">Pressure: <span id="pressure"></span> hPa</p>
      <p class="humidity">Humidity: <span id="humidity"></span>%</p>
      <p class="wind">Wind: <span id="wind-dir"></span> <span id="wind-speed"></span> mph (gusts: <span id="gust"></span> mph)</p>
    </section>
    <section class="controls">
      <button id="switch-temp-format">Switch to &#176;<span id="temp-format"></span></button>
      <button id="show-advanced">Show Advanced</button>
    </section>
  </div>
  <div id="attribution">
    <p id="photographer">Background photo by <a id="photogUrl" href="" target="_blank"></a></p>
  </div>
</div>
            
          
!
            
              * {
  box-sizing: border-box;
  position: relative;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Encode Sans", sans-serif;
  color: #ddd;
  overflow: hidden;
}
#attribution {
  font-style: italic;
  font-size: 80%;
  position: fixed;
  bottom: 5px;
  right: 5px;
  background-color: rgba(108,108,108,0.8);
  color: #aaa;
  &:hover {
    background-color: rgba(90,90,90,1);
    color: #bbb;
  }
  p {
    margin: 10px;
  }
  a {
    color: #aaa;
  }
}
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  background: url('https://images.unsplash.com/photo-1495401220594-550313c3046b') no-repeat center/cover;
  background-color: gray;
}
.weatherinfo {
  margin: 0 auto;
  max-width: 600px;
  background-color: rgba(0,0,0,0.7);
  padding: 0px 15px 15px 15px;
}
.header {
  display: block;
  height: 3em;
  font-size: 2em;
  h1 {
    margin: 0;
    display: inline-block;
  }
  p {
    font-size: 1.5em;
    display: inline-block;
  }
}
.temp {
  float: left;
}
.cond-icon {
  float: right;
  margin: 0;
  padding-right: 10px;
  line-height: 73px;
}
.location {
  margin: 0;
  #location {
    float: left;
    font-size: 1.5em;
  }
  #time {
    float: right;
    font-size: 80%;
    line-height: 27px;
  }
  #reload {
    float: right;
    line-height: 27px;
    padding-left: 5px;
    cursor: pointer;
  }
}
.clearfix::after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.info-advanced {
  display: none;
}
.controls {
  margin-top: 15px;
}
button {
  font-family: "Encode Sans", sans-serif;
  background-color: rgba(108,108,108,0.5);
  border: none;
  outline: none;
  color: #aaa;
  padding: 15px;
  &:hover {
    cursor: pointer;
    background-color: rgba(108,108,108,0.8);
    color: #ccc;
  }
}
            
          
!
            
              $(document).ready(function(){
  // initialize vars
  let lat, lon, weather, srcUrl, 
      currentConditions = 'clear',
      tempFormat = 'c',
      date = {},
      temps = {c:{}, f:{}},
      misc = {},
      picUrls = {
        /* photos courtesy of unsplash.com */
        'default': {
            'url': 'https://images.unsplash.com/photo-1495401220594-550313c3046b',
            'photographer': 'Mila Young',
            'photogUrl': 'https://unsplash.com/@allisweeell'
        },
        'day': {
          'clear': {
            'url': 'https://images.unsplash.com/photo-1494187570835-b188e7f0f26e',
            'photographer': 'Dawid Zawila',
            'photogUrl': 'https://unsplash.com/@davealmine'
          },
          'partlyCloudy': {
            'url': 'https://images.unsplash.com/photo-1445251592264-89e927dfa5b6',
            'photographer': 'matthaeus',
            'photogUrl': 'https://unsplash.com/@matthaeus123'
          },
          'cloudy': {
            'url': 'https://images.unsplash.com/uploads/14122598319144c6eac10/5f8e7ade',
            'photographer': 'Daria Nepriakhina',
            'photogUrl': 'https://unsplash.com/@epicantus'
          },
          'rain': {
            'url': 'https://images.unsplash.com/photo-1486016006115-74a41448aea2',
            'photographer': 'Gabriele Diwald',
            'photogUrl': 'https://unsplash.com/@gabrielediwald'
          },
          'storm': {
            'url': 'https://images.unsplash.com/photo-1500740516770-92bd004b996e',
            'photographer': 'Anandu Vinod',
            'photogUrl': 'https://unsplash.com/@anandu'
          },
          'snow': {
            'url': 'https://images.unsplash.com/photo-1431036101494-66a36de47def',
            'photographer': 'Aaron Wilson',
            'photogUrl': 'https://unsplash.com/@aaronwilson'
          },
          'fog': {
            'url': 'https://images.unsplash.com/photo-1496156298940-6902fc34e55d',
            'photographer': 'Chris Barbalis',
            'photogUrl': 'https://unsplash.com/@cbarbalis'
          }
        },
        'night': {
          'clear': {
            'url': 'https://images.unsplash.com/photo-1487111094912-921182c44b79',
            'photographer': 'Adam Birkett',
            'photogUrl': 'https://unsplash.com/@abrkett'
          },
          'partlyCloudy': {
            'url': 'https://images.unsplash.com/photo-1501418611786-e29f9929fe03',
            'photographer': 'Aral Tasher',
            'photogUrl': 'https://unsplash.com/@araltasher'
          },
          'cloudy': {
            'url': 'https://images.unsplash.com/photo-1479156661942-92cd989cdb56',
            'photographer': 'Matthew Kane',
            'photogUrl': 'https://unsplash.com/@matthewkane'
          },
          'rain': {
            'url': 'https://images.unsplash.com/photo-1486016006115-74a41448aea2',
            'photographer': 'Gabriele Diwald',
            'photogUrl': 'https://unsplash.com/@gabrielediwald'
          },
          'storm': {
            'url': 'https://images.unsplash.com/photo-1500740516770-92bd004b996e',
            'photographer': 'Anandu Vinod',
            'photogUrl': 'https://unsplash.com/@anandu'
          },
          'snow': {
            'url': 'https://images.unsplash.com/photo-1483333312588-7f53835a19dd',
            'photographer': 'Filip Mroz',
            'photogUrl': 'https://unsplash.com/@mroz'
          },
          'fog': {
            'url': 'https://images.unsplash.com/photo-1496156298940-6902fc34e55d',
            'photographer': 'Chris Barbalis',
            'photogUrl': 'https://unsplash.com/@cbarbalis'
          }
        }
      };
  
  if (navigator.geolocation) {  // check if the user has access to navigation
    navigator.geolocation.getCurrentPosition(getWeather);
  }
  
  function getWeather(pos){
      lat = pos.coords.latitude;    // set the latitude
      lon = pos.coords.longitude;   // set the longitude
      
      // insert lat and lon for a valid endpoint specific to the user's location
      srcUrl = 'https://fcc-weather-api.glitch.me/api/current?lat=' + lat + '&lon=' + lon;
      $.getJSON(srcUrl, function(weather){
        
        // populate the location field
        $("#location").text(weather.name);
        
        // populate the date object
        date.queryTime = new Date();
        date.timeString = formatTimeString(date.queryTime);
        date.sunrise = formatTimeString(new Date(weather.sys.sunrise * 1000));
        date.sunset = formatTimeString(new Date(weather.sys.sunset * 1000));
        date.dayTime = (date.queryTime.getHours() >= 7 && date.queryTime.getHours() <= 19) ? 'day' : 'night';
        
        // populate the time field and sunrise/set fields
        $("#time").text(date.timeString);
        $("#sunrise").text(date.sunrise);
        $("#sunset").text(date.sunset);
        
        /* 
        Countries that use fahrenheit and their country codes: 
        United States: US
        Belize: BZ
        Bahamas: BS
        Cayman Islands: KY
        Palau: PW
        */
        // if one of the fahrenheit countries, set the tempFormat to f
        if (weather.sys.country == 'US' || 
            weather.sys.country == 'BZ' || 
            weather.sys.country == 'BS' || 
            weather.sys.country == 'KY' || 
            weather.sys.country == 'PW') {
          tempFormat = 'f';
        }
        // populate all the temps c and f properties
        temps.c.current = Math.round(weather.main.temp); // need to round the initial celsius temp
        temps.c.min = weather.main.temp_min;
        temps.c.max = weather.main.temp_max;
        temps.f.current = cToF(weather.main.temp);
        temps.f.min = cToF(weather.main.temp_min);
        temps.f.max = cToF(weather.main.temp_max);
        
        // populate the main temp and min/max temp fields
        populateTemps(tempFormat);
        
        // set the temp-format and temp-type text fields based on tempFormat's current value
        $("#temp-format").text((tempFormat == 'c' ? 'F' : 'C'));
        $("#temp-type").text((tempFormat == 'c' ? 'C' : 'F'));
        
        // set conditions icon; pass just the first weather id code
        $("#cond-icon").html(setCondIcon(weather.weather[0].id));
        
        // set conditions description text
        $("#conditions-desc").text(getCondDesc(weather.weather));
        
        // set pressure, humidity, wind speed and direction
        misc.pressure = weather.main.pressure;
        misc.humidity = weather.main.humidity;
        misc.windSpeed = weather.wind.speed;
        misc.gust = weather.wind.gust || 0;
        misc.windDir = getWindDir(weather.wind.deg);
        
        // populate misc text fields
        $("#pressure").text(misc.pressure);
        $("#humidity").text(misc.humidity);
        $("#wind-dir").text(misc.windDir);
        $("#wind-speed").text(misc.windSpeed);
        $("#gust").text(misc.gust);
        
        // set a background image based on the current conditions
        setBgAndAttribution();
      });
    }
  
  // reload the weather when the user clicks the reload button
  $("#reload").click(function(){
    // visibly reset the main text fields to show the button has been clicked
    $("#temp").text('');
    $("#location").text('');
    $("#time").text('');
    navigator.geolocation.getCurrentPosition(getWeather);
  });
  
  // swap temperature text fields from F to C (or vice versa)
  $("#switch-temp-format").click(function(){
    $("#temp-type").text((tempFormat == 'c' ? 'F' : 'C'));
    tempFormat = tempFormat == 'f' ? 'c' : 'f';
    populateTemps(tempFormat);
    $("#temp-format").text((tempFormat == 'c' ? 'F' : 'C'));
  });
  
  // show the advanced weather info
  $("#show-advanced").click(function(){
    $("#info-advanced").slideToggle();
  });
  
  // set the background image and attribution text/link
  function setBgAndAttribution() {
    $("#container").css("background-image", "url('" + picUrls[date.dayTime][currentConditions].url + "')");
    $("#photogUrl").text(picUrls[date.dayTime][currentConditions].photographer);
    $("#photogUrl").attr('href', picUrls[date.dayTime][currentConditions].photogUrl);
  }
  
  // convert a temp from celsius to fahrenheit
  function cToF(temp) { return Math.round(temp * (9/5) + 32); };

  // populate temperature text fields
  function populateTemps(format) {
    $("#temp").text(temps[format].current);
    $("#temp-min").text(temps[format].min);
    $("#temp-max").text(temps[format].max);
  }

  // this will ensure time strings are formatted appropriately: e.g., 9:02 won't display as 9:2
  function formatTimeString(dateObj) {
    let timeString = "";
    let period = dateObj.getHours() < 12 ? "a.m." : "p.m.";
    timeString += dateObj.getHours() > 12 ? dateObj.getHours() - 12 : dateObj.getHours();
    timeString += ":" + (dateObj.getMinutes() < 10 ? "0" + dateObj.getMinutes().toString() : dateObj.getMinutes()) + " " + period;
    return timeString;
  }
  
  // convert wind meteorological degrees to cardinal/intermediate directions 
  function getWindDir(deg) {
    if (deg >= 337.5 || deg < 22.5) { return "N"; }
    else if (deg >= 22.5 || deg < 67.5) { return "NE"; }
    else if (deg >= 67.5 || deg < 112.5) { return "E"; }
    else if (deg >= 112.5 || deg < 157.5) { return "SE"; }
    else if (deg >= 157.5 || deg < 202.5) { return "S"; }
    else if (deg >= 202.5 || deg < 247.5) { return "SW"; }
    else if (deg >= 247.5 || deg < 292.5) { return "W"; }
    else { return "NW"; }
  }
  
  // function for returning conditions descriptions
  function getCondDesc(weatherArray) {
    let str = "";
    for (let i = 0; i < weatherArray.length; i++) {
      str += weatherArray[i].description;
      if (i < weatherArray.length - 1) { str += ", " }
    }
    return str;
  }
  
  // function for setting conditions icon
  // based on possible return codes from https://openweathermap.org/weather-conditions
  // icons from http://erikflowers.github.io/weather-icons/
  // also sets the current conditions variable to adjust the background appropriately
  function setCondIcon(condID) {
    let modifier = "";
    let dayTime = date.dayTime;
    switch (condID) {
      case 200: //	thunderstorm with light rain	 11d
      case 201: //	thunderstorm with rain	 11d
      case 202: //	thunderstorm with heavy rain	 11d
      case 210: //	light thunderstorm	 11d
      case 211: //	thunderstorm	 11d
      case 212: //	heavy thunderstorm	 11d
      case 221: //	ragged thunderstorm	 11d
      case 230: //	thunderstorm with light drizzle	 11d
      case 231: //	thunderstorm with drizzle	 11d
      case 232: //	thunderstorm with heavy drizzle	 11d
      case 906:	// hail
      case 960:	//  storm
      case 961:
        currentConditions = 'storm';
        modifier = 'wi-storm-showers';
        break;
      
      case 300: //	light intensity drizzle	 09d
      case 301: //	drizzle	 09d
      case 302: //	heavy intensity drizzle	 09d
      case 310: //	light intensity drizzle rain	 09d
      case 311: //	drizzle rain	 09d
      case 312: //	heavy intensity drizzle rain	 09d
      case 313: //	shower rain and drizzle	 09d
      case 314: //	heavy shower rain and drizzle	 09d
      case 321: //	shower drizzle	 09d
        currentConditions = 'rain';
        modifier = 'wi-raindrops';
        break;
        
      case 500: //	light rain	 10d
      case 501: //	moderate rain	 10d
      case 520: //	light intensity shower rain	 09d
      case 521: //	shower rain	 09d
      case 531: //	ragged shower rain	 09d
        currentConditions = 'rain';
        modifier = 'wi-rain';
        break;
      case 502: //	heavy intensity rain	 10d
      case 503: //	very heavy rain	 10d
      case 504: //	extreme rain	 10d
      case 522: //	heavy intensity shower rain	 09d
        currentConditions = 'rain';
        modifier = 'rain-wind';
        break;
        
      case 600: //	light snow	 13d
      case 601: //	snow	 13d
      case 602: //	heavy snow	 13d
      case 620: //	light shower snow	 13d
      case 621: //	shower snow	 13d
      case 622: //	heavy shower snow	 13d
        currentConditions = 'snow';
        modifier = 'wi-snowflake-cold';
        break;
        
      case 511: //	freezing rain	 13d
      case 611: //	sleet	 13d
      case 612: //	shower sleet	 13d
        currentConditions = 'snow';
        modifier = 'wi-sleet';
        break;
        
      case 615: //	light rain and snow	 13d
      case 616: //	rain and snow	 13d
        modifier = 'wi-rain-mix';
        break;
        
      case 701: //	mist	 50d
      case 741: //	fog	 50d
        currentConditions = 'fog';
        modifier = 'wi-fog';
        break;
        
      case 711:	// smoke	 50d
        currentConditions = 'fog';
        modifier = 'wi-smoke';
        break;
        
      case 721:	// haze	 50d
        currentConditions = 'fog';
        modifier = 'wi-smog';
        break;
        
      case 731:	// sand, dust whirls	 50d
      case 751:	// sand	 50d
      case 761:	// dust	 50d
        currentConditions = 'fog';
        modifier = 'wi-dust';
        break;
        
      case 762:	// volcanic ash	 50d
        modifier = 'wi-volcano';
        break;
        
      case 771:	// squalls	 50d
      case 958:	// gale
      case 959:	// severe gale
        modifier = 'wi-strong-wind';
        break;
        
      case 781:	// tornado	 50d
      case 900:	// tornado
        currentConditions = 'storm';
        modifier = 'wi-tornado';
        break;
        
      case 800:	// clear sky	 01d  01n
      case 951:	// calm
      case 903:	// cold
      case 904:	// hot
      case 952:	// light breeze
      case 953:	// gentle breeze
      case 954:	// moderate breeze
      case 955:	// fresh breeze
        modifier = dayTime == 'night' ? 'wi-night-clear' : 'wi-day-sunny' ;
        break;
      
      case 801:	// few clouds	 02d  02n
      case 802:	// scattered clouds	 03d  03n
      case 803:	// broken clouds	 04d  04n
        currentConditions = 'partlyCloudy';
        modifier = dayTime == 'night' ? 'wi-night-alt-cloudy' : 'wi-day-cloudy' ;
        break;
      case 804:	// overcast clouds	 04d  04n
        currentConditions = 'cloudy';
        modifier = 'wi-cloudy' ;
        break;
                      
      case 905:	// windy
      case 956:	// strong breeze
      case 957:	// high wind, near gale
        modifier = dayTime == 'night' ? 'wi-night-cloudy-gusts' : 'wi-day-cloudy-gusts' ;
        break;
        
      case 901:	// tropical storm
      case 902:	// hurricane
      case 962:	// hurricane
        currentConditions = 'storm';
        modifier = 'wi-hurricane';
        break;
        
      default:
        modifier = dayTime == 'night' ? 'wi-night-clear' : 'wi-day-sunny' ;
        break;
    }
    return ("<i class='wi " + modifier + "'></i>");
  }
});
            
          
!
999px
Loading ..................

Console