Weather Card

index.html

<div class = "weather">
  <div class = "location">
    <h1 id = "city"></h1>
    <p id = "condition"></p>
  </div>
  <div class = "condition">
    <div id = "weather-icon"></div>
    <h2 id = "temp"></h2>
  </div>
  <ul class = "details">
    <li id = "humidity"></li>
    <li id = "wind"></li>
    <li id ="precip"></li>
  </ul>
  <p class = "cf"></p>
  <div id = "calendar"></div>
  <p class = "cf"></p>
  <p id = "time"></p>
</div>

script.js

jQuery(document).ready(function($) {
  
  var api = ""; /* Get your own API key from wunderground.com */
  var icon_set = "http://icons.wxug.com/i/c/k/"; /*choose your icon set */
  
  /* get city & state from IP */
  $.ajax({
    url : "http://freegeoip.net/json/", dataType : "jsonp", success : function(data) { 
      var state = data.region_code;
      var city = data.city; 
      
      /* get current weather conditions */
      $.ajax({
        url : "http://api.wunderground.com/api/" + api + "/conditions/q/" + state + "/" + city + ".json",
        dataType : "jsonp",
        success : function(data) {
          console.log(data);
          var location_json = data.current_observation.display_location.full;
          var time = data.current_observation.observation_time;
          var icon_json = '<img src ="' + icon_set + data.current_observation.icon + '" />';
          var temp_json = data.current_observation.temp_f + "<span>°F</span>";
          var condition_json = data.current_observation.weather;
          var humidity_json = "Humidity: " + data.current_observation.relative_humidity;
          var wind_json = "Wind: " + data.current_observation.wind_mph + " mph";
          
          document.getElementById("city").innerHTML = location_json;
          document.getElementById("time").innerHTML = time;
          document.getElementById("weather-icon").innerHTML = icon_json;
          document.getElementById("temp").innerHTML = temp_json;
          document.getElementById("condition").innerHTML = condition_json;  
          document.getElementById("humidity").innerHTML = humidity_json; 
          document.getElementById("wind").innerHTML = wind_json; 
        }
      });
      
      
      /* get precip chance */
      $.ajax({
        url : "http://api.wunderground.com/api/" + api + "/hourly/q/" + state + "/" + city + ".json",
        dataType : "jsonp",
        success : function(data) {
          var precip_json = "Precipitation: " + data.hourly_forecast[0].pop + "%";
          document.getElementById("precip").innerHTML = precip_json; 
        }
      });
      
      /* 7 day forecast */
      $.ajax({
        url : "http://api.wunderground.com/api/" + api + "/forecast10day/q/" + state + "/" + city + ".json",
        dataType : "jsonp",
        success : function(data) { 
          var output = "<ol>";
          for (i = 0; i <= 7; i++) {
            if (i === 0) { output += '<li class = "today">'; }
            else { output += '<li>'; }
            
            output += data.forecast.simpleforecast.forecastday[i].date.weekday_short;
            output += '<img src ="' + icon_set + data.forecast.simpleforecast.forecastday[i].icon + '" />';
            output += data.forecast.simpleforecast.forecastday[i].high.fahrenheit + "°";
            output += " " + data.forecast.simpleforecast.forecastday[i].low.fahrenheit + "°";
            output += "</li>";
            document.getElementById("calendar").innerHTML = output; 
          }
          output += "</ol>";
        }
      });
    }});
  
});

style.css

/***** resets *****/

p, ol, ul, li { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.cf:before,.cf:after{content: " ";display:table;}.cf:after{clear:both;}

/***** main styles *****/

.weather {
  margin: 2em; 
  padding: 25px;
  
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  min-height: 1px;
  width: 575px;
}

.location > h1 { 
  margin: 0;
  padding: 0; 
}

#temp { 
  position: relative;
  margin: 0;
  padding: 0;
  
  float: right;
}

#temp > span {
  position: absolute;
  margin-top: 12px;
}

#weather-icon {
  margin: 20px 15px 0 0;
  float: left;
}

#weather-icon img { 
  width: 100px; 
  margin-top: -25px;
}

.condition { 
  float: left; 
  margin-top: 10px;
  margin-right: 100px;
}

.details { 
  float: left; 
  margin-top: 20px;
}

/* 7 day forecast */

.weather-icon-small { 
  height: 31px; 
  width: 45px; 
  margin: 10px auto;
  
  outline: solid orange; 
}

#calendar p { display: inline; }
#calendar li { 
  text-align: center;
  margin-right: 5px;
  padding: 3px;
  
  float: left;
  width: 60px;
}

#calendar .today {
  background-color: rgb(252, 252, 252);
  border: 1px solid rgb(233, 233, 233);
  margin-left: -2px;
}

/***** typograhpy *****/

.weather { font-family: Arial; }
.weather li, .weather p { font-size: 18px;  }
.weather h1, .weather li, .weather p { color: #878787;  }

#temp { 
  font-size: 80px; 
  font-weight: normal;
  color: #212121; 
  letter-spacing: -5px;
}

#temp > span { 
  font-size: 20px; 
  letter-spacing: 0;
}
.location > p, .details > li {font-size: 20px; }
.day { font-size: 16px; }

#time { 
  font-size: 0.75em; 
  margin-top: 25px;
}

Weather-Card.markdown

Weather Card

Simple weather widget, pulls JSON data via JQuery from the wunderground.com API.

A Pen by James Barnett on CodePen.

License.