Skip to content

Instantly share code, notes, and snippets.

@LibertysYarn

LibertysYarn/Local Weather .markdown

Created November 15, 2015 02:59
Show Gist options
  • Save LibertysYarn/18820d365ebd8d48d427 to your computer and use it in GitHub Desktop.
Save LibertysYarn/18820d365ebd8d48d427 to your computer and use it in GitHub Desktop.
Download ZIP
Local Weather
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Local Weather </title>
<link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nixie+One|Hind+Vadodara:500" rel="stylesheet" type="text/css">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script>
</head>
<body>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"> </div>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<div class="bk-cover">
<div class="inner cover">
<h1>Your Local Weather</h1>
<div class="row">
<div id="icon"></div>
<div id="tempF" class="temp"></div><span class="temp"> / </span>
<div id="tempC" class="temp"></div>
</div>
<div id="address" class="btn btn-lg btn-default"></div>
<div id="sky" class="btn btn-lg btn-default"></div>
<div id="wind" class="btn btn-lg btn-default"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Raw
script.js
$(document).ready(function() {
getLocation();
var appId = 'f9ac58d42469c107ee28a3aba7afd53a';
var $address = $('#address');
var $tempF = $('#tempF');
var $tempC = $('#tempC');
var $sky = $('#sky');
var $icon = $('#icon');
var $wind = $('#wind');
var sunrise = [];
var sunset = [];
function getLocation() {
$.get('http://ipinfo.io', function(ipInfo) {
var latsplit = ipInfo.loc.split(',', 2);
var lat = latsplit[0];
var lon = latsplit[1];
getWeather(lat, lon);
}, 'jsonp');
$.get(('http://ip-api.com/json/?'), function(data) {
var city = data.city;
var region = data.regionName;
$address.html(data.city + ', ' + data.region);
}, 'jsonp');
}
function degToCompass(num) {
var val = Math.floor((num / 22.5) + 0.5);
var arr = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
return arr[(val % 16)];
}
function getWeather(lat, lon) {
$.get(('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&APPID=' + appId),
function(weather) {
var tempK = (weather.main.temp).toFixed(0);
var tempF = (((weather.main.temp - 273.15) * 9 / 5) + 32).toFixed(0);
var tempC = ((weather.main.temp) - 273.15).toFixed(0);
var icon = 'http://openweathermap.org/img/w/' + weather.weather[0].icon + '.png';
var wind = (weather.wind.speed * 1.94).toFixed(0);
var degree = degToCompass(weather.wind.deg);
var clouds = (weather.clouds.all);
var sunR = (weather.sys.sunrise);
var sunS = (weather.sys.sunset);
cloudy(clouds);
$wind.text(degree + ' ' + wind + ' knots');
$tempF.text(tempF + '\xB0' + 'F');
$sky.text(weather.weather[0].description);
$tempC.text(tempC + '\xB0' + 'C');
$('#tempK').text(tempK + '\xB0' + 'K');
$icon
.append("<img src='http://openweathermap.org/img/w/" + weather.weather[0].icon + ".png'>");
function sRTime() {
var sunrise1 = new Date(sunR * 1000);
var sH = sunrise1.getHours();
var sM = sunrise1.getMinutes();
sunrise.push(sH, sM);
}
function sSTime() {
var sunset1 = new Date(sunS * 1000);
var sSH = sunset1.getHours();
var sSM = sunset1.getMinutes();
sunset.push(sSH, sSM);
}
function tillSun() {
sRTime();
sSTime();
var now = new Date();
var nowM = now.getHours() * 60 + now.getMinutes();
var sunriseM = sunrise[0] * 60 + sunrise[1];
var sunsetM = sunset[0] * 60 + sunset[1];
if (nowM > sunsetM - 60 && nowM <= sunsetM + 60) {
console.log("dusk");
$('#clouds').css({
"background-color": "rgba(246, 160, 147, 0.5)",
"background-blend-mode": "multiply"
});
} else if (nowM > sunriseM - 60 && nowM <= sunriseM + 60) {
console.log("dawn");
$('#clouds').css({
"background-color": "rgba(237, 171, 227, 0.5)",
"background-blend-mode": "multiply"
});
} else if (nowM > sunriseM + 60 && nowM <= sunsetM - 60) {
console.log("day");
} else {
console.log("night");
$('#clouds').css({
"background-color": "rgba(73, 61, 111, 0.1)",
"background": "-webkit-linear-gradient(top, #493D6F 0%, #333 100%)",
"background": "-linear-gradient(top, #493D6F 0%, #333 100%)",
"background": "-moz-linear-gradient(top, #493D6F 0%, #333 100%)",
"background": "-o-linear-gradient(top, #493D6F 0%, #333 100%)",
"background": "-ms-linear-gradient(top, #493D6F 0%, #333 100%)"
});
/* $('body').css({ "background": "rgba(73, 61, 111, 0.1)" });*/
}
}
tillSun();
}, 'jsonp');
}
function cloudy(clouds) {
var $cloudNode = $('#clouds');
var $cloudNode1 = $('.x1');
var $cloudNode2 = $('.x2');
var $cloudNode3 = $('.x3');
var $cloudNode4 = $('.x4');
var $cloudNode5 = $('.x5');
if (clouds < 20) {
$('.cloud').css({
"display": "none"
});
$('#clouds').css({
"padding": "300px 0px"
});
} else if (clouds > 80) {
function twiceCloud() {
$cloudNode2.append($cloudNode2);
$cloudNode3.append($cloudNode3);
$cloudNode4.append($cloudNode4);
$cloudNode5.append($cloudNode5);
$cloudNode1.append($cloudNode1);
};
} else if (81 < clouds > 100) {
twiceCloud(2);
} else {
}
}
}(jQuery));
// Google Fonts //
WebFontConfig = {
google: {
families: ['Nixie+One::latin', 'Hind+Vadodara:500:latin'],
},
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js"></script>
Raw
style.css
/* To Dos */
/* add a thermometer slider */
/* check on weather description return - switch to console.log*/
/* look for better weather icons */
/* change units based on location */
#lat,
#lon {
display: none;
}
h1 {
font-family: 'Nixie One', cursive;
text-transform: uppercase;
font-size: 4em;
color: #000;
}
h2 {
font-family: 'Hind Vadodara', sans-serif;
text-transform: none;
font-size: 4em;
color: #000;
}
a,
a:focus,
a:hover {
color: #000;
text-decoration: none;
}
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #000;
text-shadow: none;
opacity: 1.0;
margin: 10px;
text-transform: uppercase;
text-decoration: bold;
background-color: #fff;
border: 1px solid #fff;
}
html,
body {
height: 100%;
background-color: #333;
font-family: 'Nixie One', cursive;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.site-wrapper {
display: table;
width: 100%;
height: 100%;
top: 0;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
.inner {
margin: -200px 25px;
top: 0;
}
.masthead-brand {
margin: 10px 40%;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff;
/* IE8 proofing */
color: rgba(255, 255, 255, .75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255, 255, 255, .25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
.cover {
padding: 0 20px;
margin: 35px 0;
}
.bk-cover {
background-color: #f5f5f5;
opacity: .75;
border-radius: 20px;
padding: 10px 0;
}
.cover .btn-lg {
padding: 20px 20px;
font-weight: bold;
}
#icon,
.temp {
display: inline-block;
font-size: 2em;
}
#icon {
height: 20px;
position: relative;
}
.mastfoot {
color: #999;
color: rgba(255, 255, 255, .5);
}
@media (min-width: 992px) {
.masthead, .mastfoot, .cover-container {
width: 800px;
}
}
/*Clouds*/
* {
margin: 0;
padding: 0;
}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds {
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -ms-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -o-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px;
height: 60px;
background: #fff;
-moz-border-radius: 200px;
-ms-border-radius: 200px;
-o-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
position: relative;
z-index: -10;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
top: -15px;
left: 10px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
/*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-ms-transform: scale(0.75);
-o-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
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