Skip to content

Instantly share code, notes, and snippets.

@sethxd

sethxd/index.html

Created September 1, 2015 13:08
Show Gist options
  • Save sethxd/7f60805a5fb3fafb7c79 to your computer and use it in GitHub Desktop.
Save sethxd/7f60805a5fb3fafb7c79 to your computer and use it in GitHub Desktop.
Download ZIP
weather app
Raw
index.html
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-12 temp">
<span><img id="icon"></span><p id="temp"></p>
</div>
</div>
<div class="row text-center">
<div class="col-md-12">
<ul class="list-unstyled list-inline weather-items">
<li class="weather" id="city"></li>
<li class="weather" id="weather"></li>
<li class="weather" id="wind"></li>
</ul>
</div>
</div>
</div>
Raw
script.js
var zip;
var apiurl;
var state;
$(document).ready(function() {
$.getJSON('http://ipinfo.io/json?callback=?', function (response) {
zip = response.postal;
state = response.region;
apiurl = 'http://api.openweathermap.org/data/2.5/weather?zip=' + zip + ',us&units=imperial';
$.getJSON(apiurl, function (json) {
console.log(json);
var tempRange = (json.main.temp);
$('#temp').html(tempRange + " F");
console.log(tempRange)
var bg;
if (tempRange > 70) {
bg = "hothot"
} else if (tempRange < 70 && tempRange > 60) {
bg ="hot"
} else if (tempRange < 60 && tempRange > 50) {
bg = "warm"
} else if (tempRange < 50 && tempRange > 40) {
bg = "chilly"
} else {
bg = "default"
};
console.log(bg);
switch (bg) {
case 'hothot':
$('body').css("background", "url(https://static.pexels.com/photos/3853/sunny-sand-desert-hiking.jpeg) fixed no-repeat");
$('body').css("background-size", "cover");
break;
case 'hot':
$('body').css("background", "url(https://static.pexels.com/photos/6688/beach-sand-blue-ocean.jpg) fixed no-repeat");
$('body').css("background-size", "cover");
break;
case 'warm':
$('body').css("background", "url(https://static.pexels.com/photos/4477/nature-forest-trees-path.jpg) fixed no-repeat");
$('body').css("background-size", "cover");
break;
case 'chilly':
$('body').css("background", "url(https://static.pexels.com/photos/5273/black-and-white-forest-brook-creek.jpg) fixed no-repeat");
$('body').css("background-size", "cover");
break;
}
$('#city').html(json.name.toUpperCase() + ', ' + state.toUpperCase());
$('#weather').html(json.weather[0].description.toUpperCase());
$('#wind').html(json.wind.speed + ' KNOTS');
var icon = 'http://openweathermap.org/img/w/' + json.weather[0].icon + '.png';
$('#icon').attr('src', icon)
})
})
})
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
.temp {
font-weight: bold;
font-size: 4em;
}
.weather-items {
background: #fff;
border-radius: 10px;
width: 60%;
margin: auto;
font-weight: bold;
font-size: 1.3em;
}
.weather {
padding: 20px !important;
}
body {
padding-top: 50px;
}
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