Weather

index.html

<div class="container-fluid">
  <div id="hero">
      <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <img class="icon img-responsive"/>
    </div>
    </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <h1 class="text-center">It is <span id="temp"></span>&deg;<a href="#" id="unitType">F</a>.</h1>
    </div>

  </div>
  </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <p class="text-center"><a href="http://chrisdodds.net">Chris Dodds</a> CC Share-Alike | Icons via <a href=" http://icon-works.com">IconWorks</a></p>
    </div>
  </div>
</div>  

script.js

$(document).ready(function() {
  $.getJSON('https://freegeoip.net/json/')
    .done(function(location) {
      var lat = location.latitude;
      var long = location.longitude;
      var key = '&APPID=af2e1d35d9fa43aa6b43cd37f776fff6';
      var url = 'https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + key;

      $.get(url, function(response) {
        var temp = response.main.temp;
        var condition = response.weather[0].id;
        var unitType = "F";
        $("#unitType").html("F");
        var f = Math.floor(temp * 9 / 5 - 459.67);
        $("#temp").html(f);
        var c = Math.floor(temp - 273.15);
        $("#unitType").click(function() {
          if (unitType == "F") {
            unitType = "C"
            $("#unitType").html("C");
            $("#temp").html(c);
          } else {
            unitType = "F";
            $("#unitType").html("F");
            $("#temp").html(f);
          }
        });
        var icons = ['https://dl.dropboxusercontent.com/u/14461389/weather-icons/rain.png', 'https://dl.dropboxusercontent.com/u/14461389/weather-icons/cloudy.png', 'https://dl.dropboxusercontent.com/u/14461389/weather-icons/snow.png', "https://dl.dropboxusercontent.com/u/14461389/weather-icons/sunny.png"];
        var i = 0;
        if (condition >= 700 && condition <= 800) {
          i = 3;
        } else if (condition >= 600 && condition <= 622) {
          i = 2;
        } else if (condition >= 80 && condition <= 804) {
          i = 1;
        } else if (condition <= 531) {
          i = 0;
        }
        $("img.icon").attr('src', icons[i]);
      })
    });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

body {
  background: #257FD8;
  color: #D5D8DC;
}

#hero {
  margin-top:50px;
  margin-bottom:10px;
}

h1 {
  font-size: 60px;
}

a {
  color: #fff;
}

a:hover {
  color: #D5D8DC;
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.icon {
  width:120px;
  margin: 0 auto;
  -webkit-filter: invert(100%); filter: invert(100%);
}
colors {
  #5B2C6F;
  #212F3D;
  #808B96;
}

styles

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

weather.markdown

Weather

A Pen by Chris Dodds on CodePen.

License.