Uses OpenWeatherMap's API
A Pen by Grant Park on CodePen.
<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 + " ℉"); | |
$("#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; | |
} |
Uses OpenWeatherMap's API
A Pen by Grant Park on CodePen.