Last active
August 29, 2015 14:26
-
-
Save ooade/cd1f13bc66ceec031af4 to your computer and use it in GitHub Desktop.
Local Weather App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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+"&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+" °C"); | |
$('.ft').click(function(){ | |
$('.temp-unit').html(tempFahren+" °F"); //Changes temperature unit to fahrenheit | |
}); | |
$('.kt').click(function(){ | |
$('.temp-unit').html(temp+" °K"); //Changes temperature unit to Kelvin | |
}); | |
$('.ct').click(function(){ | |
$('.temp-unit').html(tempCelc+" °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%'); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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