Skip to content

Instantly share code, notes, and snippets.

@akgold

akgold/Weather Report.markdown

Created August 26, 2015 19:34
Show Gist options
  • Save akgold/054e4aa196ed858e91dc to your computer and use it in GitHub Desktop.
Save akgold/054e4aa196ed858e91dc to your computer and use it in GitHub Desktop.
Download ZIP
Weather Report
Raw
index.html
<body>
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<div class = "container-flexible">
<div id = title> Alex's Weather Readout</div>
<div id = subtitle> Local Weather!</div>
</br>
<div id = "temp"></div>
</br>
</br>
<div id = weatherLine>
<div id = "city" class = "deets"></div>
<div id = "weather" class = "deets"></div>
</div>
</br></br>
<button id = unitButton> Change Temperature Units</button>
</div>
</body>
Raw
script.js
$(document).ready(function() {
getWeather();
function getWeather() {
$.get("http://ipinfo.io", function(loc) {
$('#city')
.append(loc.city + ", ")
.append(loc.region);
getCurrWeather(loc.loc);
}, "jsonp");
}
function getCurrWeather(loc){
lat = loc.split(",")[0]
lon = loc.split(",")[1]
var weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon
console.log(weatherUrl);
$.get(weatherUrl,function(weather){
var temp = Math.round((weather.main.temp-273.15)*9/5+32,1);
var cond = weather.weather[0].description;
var icon = weather.weather[0].icon;
icon = "<img src='http://openweathermap.org/img/w/" + icon + ".png'>";
console.log(weather.weather[0].description);
$("#temp").append(temp+" F");
$('#weather').append(cond).append(icon);
},'jsonp')
}
});
$('#unitButton').click(function(){
var temp = $("#temp").text()
var unit = temp.charAt(temp.length-1);
var digits = temp.substring(0, temp.length-1)
if(unit == "F"){
$("#temp").text(Math.round((digits-32)*5/9,1) + " C");
}
else{
$("#temp").text(Math.round(digits*9/5+32,1) + " F");
}
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body{
background: url("http://cdn.bigbangfish.com/beautiful/beautiful-sunset/beautiful-sunset-2.jpg") center center fixed;
color: #176D14;
text-align: center;
}
#title{
text-align: center;
text-shadow: 2px 2px #000000;
font-size: 5em;
font-weight: bold;
font-family: 'Righteous', cursive;
}
#subtitle{
text-align: center;
font-size: 3em;
font-weight: bold;
font-family: 'Righteous', cursive;
}
.deets{
font-family: 'Righteous', cursive;
text-align: center;
font-size: 2em;
border: 2px solid;
display: inline-block;
padding: 2% 1% 2% 1%;
background-color: #fff;
opacity: 0.9;
border-radius: 15px;
}
#temp{
color: #fff;
font-size: 4em;
border: 4px solid;
border-radius: 25px;
background: #176D14;
opacity: 0.9;
display: inline-block;
padding: 1%;
}
#unitButton{
background-color: #fff;
font-family: 'Righteous', cursive;
font-size: 2em;
border: 2px solid;
border-radius: 10px;
display: inline-block;
padding: 1%;
opacity: 0.9;
}
Raw
styles
<link href="//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