weather app

index.html

<div class="container-fluid">
  <div class="row text-center">
    <div class="col-md-12 temp">
      <span><img id="icon"></span><p id="temp"></p>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-md-12">
      <ul class="list-unstyled list-inline weather-items">
        <li class="weather" id="city"></li>
        <li class="weather" id="weather"></li>
        <li class="weather" id="wind"></li>
      </ul>
    </div>
  </div>
</div>

script.js

var zip;
var apiurl;
var state;

$(document).ready(function() {
  
  $.getJSON('http://ipinfo.io/json?callback=?', function (response) {
    zip = response.postal;
    state = response.region;
    apiurl = 'http://api.openweathermap.org/data/2.5/weather?zip=' + zip + ',us&units=imperial';
    
    $.getJSON(apiurl, function (json) {
      console.log(json);
      var tempRange = (json.main.temp);
      $('#temp').html(tempRange + " F");
      console.log(tempRange)
      var bg;
      if (tempRange > 70) {
        bg = "hothot"
      } else if (tempRange < 70 && tempRange > 60) {
        bg ="hot"
      } else if (tempRange < 60 && tempRange > 50) {
        bg = "warm"
      } else if (tempRange < 50 && tempRange > 40) {
        bg = "chilly"
      } else {
        bg = "default"
      };
      console.log(bg);
      switch (bg) {
        case 'hothot':
          $('body').css("background", "url(https://static.pexels.com/photos/3853/sunny-sand-desert-hiking.jpeg) fixed no-repeat");
          $('body').css("background-size", "cover");
          break;
        case 'hot':
          $('body').css("background", "url(https://static.pexels.com/photos/6688/beach-sand-blue-ocean.jpg) fixed no-repeat");
          $('body').css("background-size", "cover");
          break;
        case 'warm':
          $('body').css("background", "url(https://static.pexels.com/photos/4477/nature-forest-trees-path.jpg) fixed no-repeat");
          $('body').css("background-size", "cover");
          break;
        case 'chilly':
          $('body').css("background", "url(https://static.pexels.com/photos/5273/black-and-white-forest-brook-creek.jpg) fixed no-repeat");
          $('body').css("background-size", "cover");
          break;
      }
      $('#city').html(json.name.toUpperCase() + ', ' + state.toUpperCase());
      $('#weather').html(json.weather[0].description.toUpperCase());
      $('#wind').html(json.wind.speed + ' KNOTS');
      var icon = 'http://openweathermap.org/img/w/' + json.weather[0].icon + '.png';
      $('#icon').attr('src', icon)
    })
  })
  
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.temp {
  font-weight: bold;
  font-size: 4em;
}

.weather-items {
  background: #fff;
  border-radius: 10px;
  width: 60%;
  margin: auto;
  font-weight: bold;
  font-size: 1.3em;
}

.weather {
  padding: 20px !important;
}

body {
  padding-top: 50px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

weather app.markdown

weather app

A Pen by seth dehaan on CodePen.

License.