Local Weather
<link href="https://rawgit.com/bomholtm/fcc/master/_assets/css/bootstrap336.min.css" rel="stylesheet" />
<link href="https://rawgit.com/bomholtm/fcc/master/_assets/css/weather-icons.min.css" rel="stylesheet" />
<link href="https://rawgit.com/bomholtm/fcc/master/_assets/css/owl.carousel132.min.css" rel="stylesheet" />
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:300,500")
@keyframes blink
0%
opacity: 0.6
20%
opacity: 1
100%
opacity: 0.6
::selection
background: transparent
html, body
background-color: #eceff1
height: 100%
a:focus, a:hover, a:visited
text-decoration: none
.container
background-color: #eceff1
padding-top: calc(50vh - 285px)
.col-xs-12
padding: 0
.card
background-clip: padding-box
border-radius: 2px 2px
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
box-sizing: border-box
display: block
font-family: "Open Sans", sans-serif
font-weight: 400
margin: 8px auto 16px
max-width: 520px
.card-current
background-color: #009688
color: #fff
padding: 16px
#location
span
animation-name: blink
animation-duration: 1.4s
animation-iteration-count: infinite
animation-fill-mode: both
font-size: 32px
&:nth-child(2)
animation-delay: 0.2s
&:nth-child(3)
animation-delay: 0.4s
#time, #summary
color: rgba(255,255,255,0.8)
margin: 5px 0
.temp
display: inline-block
padding: 10% 0
#temperature
display: inline-block
font-size: 64px
line-height: 56px
vertical-align: middle
@media (min-width: 375px)
font-size: 72px
line-height: 60px
#unit1, #unit2
display: inline-block
font-size: 20px
vertical-align: top
#unit1
font-weight: 600
padding-left: 6px
#unit2
color: rgba(255,255,255,0.7)
font-weight: 400
padding-left: 4px
&:hover
cursor: pointer
text-decoration: none
#icon
display: inline-block
font-size: 96px
padding-left: 8%
@media (min-width: 375px)
font-size: 112px
padding-left: 16%
@media (min-width: 520px)
font-size: 120px
padding-left: 24%
.precip
font-size: 15px
.precip-icon
display: inline-block
font-size: 20px
text-align: center
vertical-align: middle
width: 30px
#precipitation
display: inline-block
padding-left: 16px
.wind
font-size: 15px
.wind-icon
display: inline-block
font-size: 20px
text-align: center
vertical-align: middle
width: 30px
#windspeed
display: inline-block
padding-left: 16px
#daybyday
background-color: #fff
padding: 16px
text-align: center
#carousel
color: #212121
font-size: 15px
div i
color: #424242
font-size: 20px
.tempMax p
margin: 10px 0 0 0
display: inline-block
.tempMax span
display: inline-block
.tempMin p
color: #757575
display: inline-block
margin: 0
.tempMin span
color: #757575
display: inline-block
#footer
background-color: #fff
border-top: 1px solid rgba(160, 160, 160, 0.2)
border-radius: 0 0 2px 2px
padding: 16px
line-height: 20px
text-align: center
a
color: #9e9e9e
font-family: "Roboto", sans-serif
font-weight: 300
&:hover
text-decoration: none
.fa-lg
vertical-align: text-top
margin-right: 4px
.bomholt
font-weight: 500
<script src="https://rawgit.com/bomholtm/fcc/master/_assets/js/jquery311.min.js"></script>
<script src="https://rawgit.com/bomholtm/fcc/master/_assets/js/owl.carousel132.min.js"></script>
$(document).ready(function(){
var lat, lon;
$("#unit2").on("click", function(){
var temp = $("#temperature").text();
if($("#unit2").text() == "/ °F"){
$("#temperature").html(Math.round((temp * 9 / 5) + 32));
$("#unit1").html("°F");
$("#unit2").html("/ °C");
for(i = 0; i <= 7; i++){
var tempMax = $("#tempMax-day-"+i).text();
var tempMin = $("#tempMin-day-"+i).text();
$("#tempMax-day-"+i).html(Math.round((tempMax * 9 / 5) + 32));
$("#tempMin-day-"+i).html(Math.round((tempMin * 9 / 5) + 32));
}
}else if($("#unit2").text() == "/ °C"){
$("#temperature").html(Math.round((temp - 32) * 5 / 9));
$("#unit1").html("°C");
$("#unit2").html("/ °F");
for(i = 0; i <= 7; i++){
var tempMax = $("#tempMax-day-"+i).text();
var tempMin = $("#tempMin-day-"+i).text();
$("#tempMax-day-"+i).html(Math.round((tempMax - 32) * 5 / 9));
$("#tempMin-day-"+i).html(Math.round((tempMin - 32) * 5 / 9));
}
}
});
$("#carousel").owlCarousel({
items : 5,
itemsCustom : false,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsTabletSmall: false,
itemsMobile : [420,4],
singleItem : false,
itemsScaleUp : false,
slideSpeed : 200,
autoPlay : false,
navigation : false,
pagination : false,
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
lazyLoad : false,
autoHeight : false,
jsonPath : false,
jsonSuccess : false,
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
transitionStyle : false,
addClassActive : false
});
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPositionHTML, showPositionIP);
}
function showPositionHTML(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
showForecast();
}
function showPositionIP(){
$.getJSON("https://freegeoip.net/json/", function(data){
lat = data.latitude;
lon = data.longitude;
showForecast();
});
}
function showForecast(position){
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lon + "&key=AIzaSyAXMXZFmmULPAuW-zEBPZLGebg3RAdft-I", function(data){
showLocation(data.results[0]);
});
$.getJSON("https://api.darksky.net/forecast/74065424d2567989648101b3cd548674/" + lat + "," + lon + "?units=auto&callback=?", function(data){
showTime(data.currently.time);
$("#summary").html(data.currently.summary);
$("#temperature").html(Math.round(data.currently.temperature));
showUnits(data.flags.units);
showIcon(data.currently.icon, "#icon");
showBackground(data.currently.icon);
$("#precipitation").html(Math.round(data.currently.precipProbability * 100) + "%");
showWindSpeed(data.flags.units, data.currently.windSpeed);
showDayByDayForecast(data.daily);
});
}
function showLocation(location){
for(i = 0; i < location.address_components.length; i++){
if(location.address_components[i].types[0] == "locality"){
$("#location").html(location.address_components[i].long_name);
}
}
}
function showTime(time){
var dayArr = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var day = dayArr[new Date(time*1000).getDay()];
var hoursArr = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"];
var hours;
var minutesArr = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"];
var minutes;
if(new Date(time*1000).getHours() < 10){
hours = hoursArr[new Date(time*1000).getHours()];
}else{
hours = new Date(time*1000).getHours();
}
if(new Date(time*1000).getMinutes() < 10){
minutes = minutesArr[new Date(time*1000).getMinutes()];
}else{
minutes = new Date(time*1000).getMinutes();
}
$("#time").html(day + ", " + hours + ":" + minutes);
}
function showUnits(unit){
if(unit == "us"){
$("#unit1").html("°F");
$("#unit2").html("/ °C");
}else{
$("#unit1").html("°C");
$("#unit2").html("/ °F");
}
}
function showWindSpeed(units, windSpeed){
switch(units){
case "us":
$("#windspeed").html(Math.round(windSpeed) + " mph");
break;
case "si":
$("#windspeed").html(Math.round(windSpeed * 3.6) + " km/h");
break;
case "ca":
$("#windspeed").html(Math.round(windSpeed) + " km/h");
break;
case "uk2":
$("#windspeed").html(Math.round(windSpeed) + " mph");
break;
}
}
function showBackground(icon){
switch(icon){
case "clear-day":
$(".card-current").css("background-color", "#4caf50");
break;
case "clear-night":
$(".card-current").css("background-color", "#3f51b5");
break;
case "rain":
$(".card-current").css("background-color", "#2196f3");
break;
case "snow":
$(".card-current").css("background-color", "#2196f3");
break;
case "sleet":
$(".card-current").css("background-color", "#2196f3");
break;
case "wind":
$(".card-current").css("background-color", "#ff9800");
break;
case "fog":
$(".card-current").css("background-color", "#ffc107");
break;
case "cloudy":
$(".card-current").css("background-color", "#ffc107");
break;
case "partly-cloudy-day":
$(".card-current").css("background-color", "#009688");
break;
case "partly-cloudy-night":
$(".card-current").css("background-color", "#673ab7");
break;
case "hail":
$(".card-current").css("background-color", "#f44336");
break;
case "thunderstorm":
$(".card-current").css("background-color", "#f44336");
break;
case "tornado":
$(".card-current").css("background-color", "#f44336");
break;
}
}
function showDayByDayForecast(daily){
for(i = 0; i <= 7; i++){
showDay(daily.data[i].time, "#day-" + i);
showIcon(daily.data[i].icon, "#icon-day-" + i);
showTempMax(daily.data[i].temperatureMax, "#tempMax-day-" + i);
showTempMin(daily.data[i].temperatureMin, "#tempMin-day-" + i);
}
}
function showDay(time, id){
var dayArr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var day = dayArr[new Date(time*1000).getDay()];
$(id).html(day);
}
function showIcon(icon, id){
switch(icon){
case "clear-day":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-clear-day");
break;
case "clear-night":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-clear-night");
break;
case "rain":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-rain");
break;
case "snow":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-snow");
break;
case "sleet":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-sleet");
break;
case "wind":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-wind");
break;
case "fog":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-fog");
break;
case "cloudy":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-cloudy");
break;
case "partly-cloudy-day":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-partly-cloudy-day");
break;
case "partly-cloudy-night":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-partly-cloudy-night");
break;
case "hail":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-hail");
break;
case "thunderstorm":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-thunderstorm");
break;
case "tornado":
$(id).removeClass();
$(id).addClass("wi wi-forecast-io-tornado");
break;
default:
$(id).removeClass();
$(id).addClass("wi wi-na");
}
}
function showTempMax(temp, id){
$(id).html(Math.round(temp));
}
function showTempMin(temp, id){
$(id).html(Math.round(temp));
}
});
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-current">
<h2 id="location">Loading data <span>.</span><span>.</span><span>.</span></h2>
<h4 id="time">Day 0, Time</h4>
<h4 id="summary">Summary</h4>
<div class="temp">
<div id="temperature">0</div>
<div id="unit1">°C</div>
<a id="unit2">/ °F</a>
</div>
<i id="icon" class="wi wi-na"></i>
<div class="precip">
<div class="precip-icon">
<i class="wi wi-raindrop"></i>
</div>
<div id="precipitation">0%</div>
</div>
<div class="wind">
<div class="wind-icon">
<i class="wi wi-strong-wind"></i>
</div>
<div id="windspeed">0 mph</div>
</div>
</div>
<div id="daybyday">
<div id="carousel" class="owl-carousel">
<div>
<p id="day-0">Day 0</p>
<i id="icon-day-0" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-0">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-0">0</p><span>°</span>
</div>
</div>
<div>
<p id="day-1">Day 1</p>
<i id="icon-day-1" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-1">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-1">0</p><span>°</span>
</div>
</div>
<div>
<p id="day-2">Day 2</p>
<i id="icon-day-2" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-2">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-2">0</p><span>°</span>
</div>
</div>
<div>
<p id="day-3">Day 3</p>
<i id="icon-day-3" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-3">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-3">0</p><span>°</span>
</div>
</div>
<div>
<p id="day-4">Day 4</p>
<i id="icon-day-4" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-4">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-4">0</p><span>°</span>
</div>
</div>
<div>
<p id="day-5">Day 5</p>
<i id="icon-day-5" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-5">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-5">0</p><span>°</span>
</div>
</div>
<div>
<p id="day-6">Day 6</p>
<i id="icon-day-6" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-6">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-6">0</p><span>°</span>
</div>
</div>
<div>
<p id="day-7">Day 7</p>
<i id="icon-day-7" class="wi wi-na"></i>
<div class="tempMax">
<p id="tempMax-day-7">0</p><span>°</span>
</div>
<div class="tempMin">
<p id="tempMin-day-7">0</p><span>°</span>
</div>
</div>
</div>
</div>
<div id="footer">
<a href="https://gist.github.com/harunpehlivan" class="bomholt" target="_blank" rel="noopener noreferrer"><i class="fa fa-github-alt fa-lg"></i> harunpehlivan / fcc</a>
<a href="https://glitch.com/@harunpehlivan" target="_blank" rel="noopener noreferrer" class="hidden-xs">(powered by HARUN PEHLİVAN)</a>
<a href="https://darksky.net/poweredby/" target="_blank" rel="noopener noreferrer" class="visible-xs-inline">(darksky.net)</a>
</div>
</div>
</div>
</div>
</div>