Skip to content

Instantly share code, notes, and snippets.

@chrisdodds
Last active September 13, 2016 18:46
Show Gist options
  • Save chrisdodds/7eb6c14a5853bffeb1e3861129171fa2 to your computer and use it in GitHub Desktop.
Save chrisdodds/7eb6c14a5853bffeb1e3861129171fa2 to your computer and use it in GitHub Desktop.
Weather
<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>
$(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]);
})
});
});
<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>
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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment