Skip to content

Instantly share code, notes, and snippets.

@al-the-x

al-the-x/index.html

Created February 19, 2015 16:32
Show Gist options
  • Save al-the-x/00bda3d2ed0bd69b89e7 to your computer and use it in GitHub Desktop.
Save al-the-x/00bda3d2ed0bd69b89e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!--bower:css-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!--endbower-->
<link href=http://fonts.googleapis.com/css?family=Oldenburg rel=stylesheet type=text/css>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/weather-icons.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div id="fullpage">
<div class="section active">
<header class="masthead">
<h1>Motherfucking Weather Version 0.0.5</h1>
<p>A T&J Enterprise</p>
<div class="input-group zipInput">
<input id="zipbox" type="text" class="form-control" placeholder="Fucking zip code">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><img src="http://cdn.icons8.com/iOS7/PNG/25/Hands/middle_finger-25.png"></button>
</span>
</div>
</header>
</div>
<div class="section" id="#current" >
<h2>Conditions For Fuckin :</h2>
<ul class="current">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="section" id="#hourly">
<h2>Next 10 Fucking Hours</h2>
<ul class="hour">
<script type="text/template">
<li class="list-group-item">
<time>${hours} o'clock</time>
<span> ${temp} &#176; ${summary} </span>
</li>
</script>
</ul>
</div>
<div class="section" id="#tenday">
<h2>Fucking 3 Day</h2>
<ul class="daily">
<li class="list-group-item day1">Fucking Tomorrow -- </li>
<li class="list-group-item day2"></li>
<li class="list-group-item day3"></li>
</ul>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.12/jquery.min.js"></script>
<script>window.jQuery || document.write(<script src="js/vendor/jquery-1.10.2.min.js"><\/script>)</script>
<!--bower:js-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<!--endbower-->
<script src="js/plugins.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
$(document).ready(function() {
var zip = $('zipcode').val();
var zipcode = Number(zip);
$("button").click(function(zip){
$.get("https://maps.googleapis.com/maps/api/geocode/json?address="+zipcode+"&key=AIzaSyAFisviBgn4MTif0nM9VYfMP3rDoBrC_XM", function(data){
console.log(data);
});
});
var TOKEN = '9e3f9effa091da78070dd0e26d01368f';
var API = _.template('https://api.forecast.io/forecast/${token}/${coords.lat},${coords.lon}');
$('#fullpage').fullpage();
/**
* @param Object coords with { lat: Number, lon: Number }
*/
function getWeather(token, coords){
return $.ajax({
url: API({ token: token, coords: coords }),
dataType: 'jsonp'
})
.fail(function(){
// Add error message to page...
})
.always(function(){
// Hide / remove loading animation...
})
; // END request
}
// Display loading animation...
var request = getWeather(TOKEN, { lat: '38.6967', lon: '76.0122' });
request.done(function(data) {
//current weather
var cTemp = data.currently.apparentTemperature;
var cHumidity = data.currently.humidity;
var cSummary = data.currently.summary;
var cCloudCover = data.currently.cloudCover;
var wIcon = data.currently.icon;
if (wIcon == 'cloudy'){
$('i').addClass('wi wi-cloudy');
}
if (wIcon == 'rain'){
$('i').addClass('wi wi-rain');
}
if (wIcon = 'clear-day'){
$('i').addClass('wi wi-day-sunny');
}
if (cSummary == 'clear-night'){
$('i').addClass('wi wi-night-clear');
}
if(wIcon == 'partly-cloudy-night'){
('i').addClass('wi wi-night-cloudy')
}
if (wIcon == ''){
$('i').addClass('wi wi-snow');
}
else{
$('i').addClass('wi wi-meteor');
};
$('.current li:nth-child(1)').html(cTemp + "\&#176");
$('.current li:nth-child(2)').html(cSummary);
$('.current li:nth-child(3)').html("Cloud Cover: " + Math.floor(cCloudCover * 100) + "%");
$('.current li:nth-child(4)').html("Humidity: " + Math.floor(cHumidity * 100) + "%");
});
request.done(function(data){
//hourly
var hourly = data.hourly.data
var hTemp = _.map(hourly, 'temperature');
var hSummary = _.map(hourly, 'summary');
var hTime = _.map(hourly, 'time');
for (var i = 0; i < 10; i++) {
var date = new Date(hTime[i] * 1000);
var hours = date.getHours();
var applesauce = _.template(
$('.hour script[type="text/template"]').html()
);
$('.hour').append(applesauce({
hours: date.getHours(),
temp: Math.floor(hTemp[i]),
summary: hSummary[i]
}));
}
console.log(data)
request.done(function(data){
//daily for 3 days
function grabTempHigh(a){
return data.daily.data[a].apparentTemperatureMax;
}
function grabTempLow(a){
return data.daily.data[a].apparentTemperatureMin;
}
function grabSummary(a){
return data.daily.data[a].summary;
}
$('.day1').html("Fuckin Tomorrow -- " + "High: " + Math.floor(grabTempHigh(0))+"\&#176" +" Low: "+ " " + Math.floor(grabTempLow(0))+ "\&#176"+" " + grabSummary(0));
$('.day2').html("Fuckin Day After -- " + "High: " + Math.floor(grabTempHigh(1))+"\&#176" +" Low: "+ " " + Math.floor(grabTempLow(1))+ "\&#176"+" " + grabSummary(1));
$('.day3').html("Fuckin Day After That -- " + "High: " + Math.floor(grabTempHigh(2))+"\&#176" +" Low: "+ " " + Math.floor(grabTempLow(2))+ "\&#176"+" " + grabSummary(2));
})
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment