Skip to content

Instantly share code, notes, and snippets.

@ooade
Last active August 29, 2015 14:26
Show Gist options
  • Save ooade/cd1f13bc66ceec031af4 to your computer and use it in GitHub Desktop.
Save ooade/cd1f13bc66ceec031af4 to your computer and use it in GitHub Desktop.
Local Weather App
<body onload="getLocation()">
<div class="container text-center">
<h2>Free Code Camp Zipline</h2>
<h2>Local Weather App</h2>
<h2><span class="temp-icon"></span> <span class="temp-unit"></span></h2>
<div class='btn-group'>
<button class='btn btn-success ft'>Fahrenheit</button>
<button class='btn btn-success kt'>Kelvin</button>
<button class='btn btn-success ct'>Celcius</button>
</div>
<div id="breadcrumbs">
<span class="breadcrumb city"></span> <span class="breadcrumb desc"></span> <span class="breadcrumb wind-speed"></span>
</div>
</div>
</body>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
/**Geolocation function to show position**/
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var direx = function(deg){/*Direction of ther wind*/
if(deg >= 0 && deg <=90) return("NE");
else if(deg > 90 && deg <=180) return("SE");
else if(deg > 180 && deg <=270) return("SW");
else if(deg > 270 && deg <=360) return("NW");
};
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+latitude+"&amp;lon="+longitude,function(data){
var city = data.name;
var temp = data.main.temp;
var tempCelc = (data.main.temp-273.15).toFixed(2);
var tempFahren = (data.main.temp*(9/5)-459.7).toFixed(2);
var wd = data.weather.shift(); //wd {Weather Data}
var icon = wd.icon;
var desc = wd.description;
var speed = data.wind.speed;
var direction = direx(data.wind.deg);
$('.temp-icon').html("<img src=http://openweathermap.org/img/w/"+icon+".png>");
$('.temp-unit').html(tempCelc+" &deg;C");
$('.ft').click(function(){
$('.temp-unit').html(tempFahren+" &deg;F"); //Changes temperature unit to fahrenheit
});
$('.kt').click(function(){
$('.temp-unit').html(temp+" &deg;K"); //Changes temperature unit to Kelvin
});
$('.ct').click(function(){
$('.temp-unit').html(tempCelc+" &deg;C"); //Changes temperature unit to Celcius
});
$('.city').html(city); //City
$('.desc').html(desc);
$('.wind-speed').html(direction+" "+speed+" Knots");
switch(desc){ /*Checks the nature of the weather and changes the background-image*/
case "broken clouds":
$('body').css('background','url(http://media.kids-myshot.nationalgeographic.com/2012/11/50b593863c91024122011180_large_medium.jpg) no-repeat');
break;
case "sky is clear":
$('body').css('background','url(http://www.artes.unt.edu.ar/wp-content/uploads/2013/01/sunny_day-1920x12002.jpg) no-repeat');
break;
case "few clouds":
$('body').css('background','url(http://api.ning.com/files/lEC1MBJNA7ZGgSRmoNZs1lpsgNT4ulGnVu04BnJul-9FG8MHpKKbTZViNwUzP2HjsVXbQa8RzSuDuemTd3PrvGevZjpxgapm/Cirrus1.jpg) no-repeat');
break;
case "scattered clouds":
$('body').css('background','url(http://pre12.deviantart.net/f990/th/pre/i/2012/039/b/c/scattered_clouds_by_devilicious_g-d4p174r.jpg) no-repeat');
break;
case "shower rain":
$('body').css('background','url(http://icons.wunderground.com/data/wximagenew/a/aerojad/3-800.jpg) no-repeat');
break;
case "Rain":
$('body').css('background','url(http://wonderopolis.org/wp-content/uploads/2012/03/rain-clouds_shutterstock_55994950.jpg) no-repeat');
break;
case "Thunderstorm":
$('body').css('background','url(http://i.ytimg.com/vi/1h5sDY2e4Rk/maxresdefault.jpg) no-repeat');
break;
case "snow":
$('body').css('background','url(http://www.thelistlove.com/wp-content/uploads/2014/12/9.jpg) no-repeat');
break;
case "mist":
$('body').css('background','url(http://jameswoodward.files.wordpress.com/2010/05/themist.jpg) no-repeat');
break;
default:
$('body').css('background','url(http://www.artes.unt.edu.ar/wp-content/uploads/2013/01/sunny_day-1920x12002.jpg) no-repeat');
}
$('body').css('background-size','100%');
});
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.navbar-inverse{
background: none;
border-bottom:none;
}
h2{
color: #fff;
}
.breadcrumb{
font-size: 24px;
color: #fff;
padding: 10px;
margin: 10px;
background-color:#d9534f;
border: 1px solid #d43f3a;
}
.breadcrumb:hover{
background-color: #c9302c;
border-color: #ac2925;
cursor: pointer;
}
#breadcrumbs{
margin-top: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment