Skip to content

Instantly share code, notes, and snippets.

@giannispan

giannispan/index.html

Forked from anonymous/index.html
Created February 15, 2016 17:24
Show Gist options
  • Save giannispan/4cb8fddcee46849b2e74 to your computer and use it in GitHub Desktop.
Save giannispan/4cb8fddcee46849b2e74 to your computer and use it in GitHub Desktop.
Download ZIP
weather report
Raw
index.html
<body>
<div class="container">
<div>
<h1>Local Weather Report</h1>
</div>
<div class="container-fluid">
<div class="info">
<div class="col-sm-10 ">
<div id="locationContainer"></div>
</div>
<div class="col-sm-10 ">
<div id="weatherContainer"></div>
</div>
<div class="col-sm-10 ">
<div id="icon"></div>
</div>
<div class="col-sm-10 ">
<div id="tempContainer">
<h3></h3>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="temp" id="far" value="far">Fahrenheit
</label>
<label class="btn btn-default">
<input type="radio" name="temp" id="cel" value="cel">Celsius
</label>
</div>
</div>
</div>
</div>
</div>
</body>
Raw
script.js
$(document).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var tUrl = "http://api.openweathermap.org/data/2.5/weather?callback=?&lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&appid=9bc4bbc08690c88e0caf8914e5b99717";
$.getJSON(tUrl, function(json){
var city = json["name"];
var country = json["sys"]["country"];
var location = city + ", " + country;
var weatherDesc = json["weather"][0]["description"];
var temp = Math.round(json["main"]["temp"]);
var far = Math.round((temp - 273.15)* 1.8000 + 32.00);
var cel = Math.round(temp - 273.15);
var icon = json["weather"][0]["icon"];
var iconLink = "http://openweathermap.org/img/w/"+icon+ ".png";
$('#icon').prepend('<img src='+iconLink+'>');
$("#locationContainer").html("<h3>" + location + "</h3>");
$("#weatherContainer").html("<h3>" + weatherDesc + "</h3>");
$("#tempContainer").html("<h3>"+ cel + " C" +"</h3>");
$('input:radio[name="temp"]').change(
function(){
if ($(this).is(':checked') && $(this).val() == 'cel') {
$("#tempContainer").html("<h3>"+ cel + " C" +"</h3>");
}
else if ($(this).is(':checked') && $(this).val() == 'far') {
$("#tempContainer").html("<h3>"+ far + " F" + "</h3>");
}
});
}); //end getJSON
});
}
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Raw
style.css
body {
background: url(http://phinphanatic.com/files/2015/09/cloudy_d-e618500.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment