Skip to content

Instantly share code, notes, and snippets.

@grant-park
Forked from anonymous/Weather.markdown
Last active August 29, 2015 14:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save grant-park/baffebae639cf0385709 to your computer and use it in GitHub Desktop.
Save grant-park/baffebae639cf0385709 to your computer and use it in GitHub Desktop.
Weather
<h1 id="header">Weather in Your Current Location</h1>
<div class="list">
<ul>
<li id="tempIcon"></li>
<li id="temp">temp</li>
<li id="details">tempDetails</li>
<li id="location">Location</li>
</ul>
</div>
<div id="bob">
<img src="http://vignette4.wikia.nocookie.net/harrypotterfanon/images/1/10/600px-Happy_smiley_face.png/revision/latest?cb=20141126010145">
</div>
<h1>Have an awesome day!</h1>
$(document).ready(function() {
getLocation();
});
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var units = "imperial"
var weather = "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&units=" + units;
$.get(weather, function(value) {
$("#temp").html(value.main.temp + " &#8457");
$("#header").html("Weather in " + value.name + ", " + value.sys.country);
$('#tempIcon').html('<img src="http://openweathermap.org/img/w/' + value.weather[0].icon + '.png">');
console.log(value.weather[0].icon);
$("#details").html(upperCase(value.weather[0].description));
$('#location').html("Wind: " + value.wind.speed + " mph");
});
}
var upperCase = function(value) {
var arr = value.split(" ");
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i][0].toUpperCase() + arr[i].substr(1);
}
return arr.join(" ");
};
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body {
background-color: tomato;
}
h1 {
margin: 0 auto;
margin-top: 50px;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: white;
font-size: 40px;
}
ul {
text-align: center;
margin: 0 auto;
list-style: none;
}
.list {
margin-top: 50px;
margin-left: -35px;
}
li {
border: 2px solid white;
border-radius: 10px;
padding: 5px 5px 5px 5px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: white;
display: inline;
}
#tempIcon img{
position: relative;
margin-bottom: -22px;
}
#bob img{
display: block;
margin: auto;
margin-top: 50px;
width: 400px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment