<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="UTF-8">
<title>Local Weather</title>
<!-- <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/weather-icons.min.css"> -->
</head>
<div class="city ">
<div class="container">
<div class="city-title ">
<span id="location"> </span>
</div>
<hr />
<div class="city-weather-temperature loader">
<span class="celsius fahrenheit-btn "></span>
<span class="fahrenheit celsius-btn"></span>
</div>
<div class="city-weather-description">
<span id="icon"></span><br>
<span id="description"></span>
</div>
<div class="bottom">
<div class="nav-info clearfix">
<div class="add-info">
<ul id="details">
<li>
<span id="todayC"> </span>
<span id="todayF"> </span>
</li>
<li>
<span id="tomorrowC"> </span>
<span id="tomorrowF"> </span>
</li>
<li>
<span id="afterTomorrowC"> </span>
<span id="afterTomorrowF"> </span>
</li>
<li>
<span id="afterAfterTomorrowC"> </span>
<span id="afterAfterTomorrowF"> </span>
</li>
</ul>
</div> <!-- add-info -->
<div><span class="date"> </span> <a href="https://harunpehlivantebimtebitagem.carrd.co/" id="forio">Powered by HARUN PEHLİVAN</a></div>
</div> <!-- nav-info -->
</div> <!-- bottom -->
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Dosis');
body {
background: url("http://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_argeprojeegitimesnasndahallerim-1.jpg") no-repeat center center fixed;
background-size: cover;
}
.city {
padding: 50px 0 10px 0;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
margin: 0 auto;
padding: 0;
width: 330px;
height: 460px;
background-size: cover;
border-radius: 3px;
position: relative;
-webkit-box-shadow: 2px 3px 7px 0px rgba(50, 50, 50, 0.8);
-moz-box-shadow: 2px 3px 7px 0px rgba(50, 50, 50, 0.8);
box-shadow: 2px 3px 7px 0px rgba(50, 50, 50, 0.8);
background: rgba(255, 255, 255, 0.05);
}
.city-title,
.city-weather-temperature,
.city-weather-description,
.city-weather-icon {
box-sizing: border-box;
font-family: 'Dosis', sans-serif;
font-weight: bold;
text-align: center;
color: #323D54;
margin: auto;
display: block;
}
.city-title {
font-size: 2.5em;
padding-top: 25px;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(20, 24, 33, 0), rgba(20, 24, 33, 0.75), rgba(20, 24, 33, 0));
width: 60%;
margin-top: 15px;
margin-bottom: 0px;
}
.city-weather-temperature {
font-size: 4em;
}
.city-weather-description {
font-size: 1.2em;
width: 200px;
margin: auto;
text-align: center;
}
.content {
position: absolute;
bottom: 0px;
z-index: 9999;
}
.wi {
display: inline-block;
font-family: 'weathericons';
color: #323D54;
font-size: 7.5em;
line-height: 1.3em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#smallIcon {
font-size: 2em;
margin-top: 5px;
}
.add-info {
text-align: left;
font-family: 'Dosis', sans-serif;
font-weight: bold;
font-size: 1em;
color: #323D54;
}
.bottom {
width: 330px;
margin: 0;
padding-top: 0;
position: absolute;
bottom: 0px;
z-index: 9999;
}
.nav-info {
background: rgba(255, 255, 255, 0.4);
}
ul {
margin-bottom: 0;
text-align:center;
}
#details {
display: flex;
}
ul {
justify-content: space-between;
list-style-type: none;
padding: 0px 35px 0px 35px;
margin-top:-10px;
}
.celsius {
cursor: pointer;
}
.fahrenheit {
cursor: pointer;
}
.celsius:hover {
color: #fff;
}
.fahrenheit:hover {
color: #fff;
}
.date{
font-size: 0.8em;
font-family: 'Dosis', sans-serif;
font-weight: bold;
color: #323D54;
float: left;
margin: 8px 5px 2px 10px;
}
#forio{
font-size: 0.8em;
font-family: 'Dosis', sans-serif;
font-weight: bold;
color: #323D54;
float: right;
margin: 8px 5px 2px 10px;
}
#forio:hover {
font-size: 0.8em;
font-family: 'Dosis', sans-serif;
font-weight: bold;
color: #fff;
float: right;
margin: 8px 5px 2px 10px;
text-decoration: none;
}
/* loader */
.loader,
.loader:before,
.loader:after {
background: #323D54;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
color: #323D54;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
$(document).ready(function() {
$('.fahrenheit').hide();
$("#todayF").hide();
$("#tomorrowF").hide();
$("#afterTomorrowF").hide();
$("#afterAfterTomorrowF").hide();
var latitude;
var longitude;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(location) {
latitude = location.coords.latitude;
longitude = location.coords.longitude;
console.log(latitude + " " + longitude);
var geolocation = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + '%2C' + longitude + '&language=en';
setTimeout(function(){
$('div').removeClass('loader');
}, 1500);
$.getJSON(geolocation).done(function(location) {
console.log(location);
//var latitude = location.results[0].geometry.location["lat"];
// var longitude = location.results[0].geometry.location["lng"];
//console.log("City: " + location.results[0].address_components[1].long_name);
//console.log("Country: " + location.results[0].address_components[3].long_name);
var location = location.results[0].address_components[1].long_name + ", " + location.results[0].address_components[3].long_name;
$("#location").html(location);
})
var url = "https://api.darksky.net/forecast/e7ea57ca52da5ae872c7c0c343f312be/" + latitude + "," + longitude + "?callback=?&units=si";
$.getJSON(url, function(data) {
console.log(data);
var temp = data.currently.temperature;
var fahrenheit = (data.currently.temperature * 9 / 5 + 32).toFixed(1) + "°F";
var celsius = data.currently.temperature.toFixed(1) + "°C";
var description = data.currently.summary;
var icon = "wi wi-forecast-io-" + data.currently.icon;
var wind = " " + data.currently.windSpeed.toFixed(1) + " m/s ";
var humidity = " " + (data.currently.humidity * 100).toFixed(0) + " %";
//bloody timeout so you can see the loading bars
setTimeout(function() {
$("#icon").html("<i class=\"" + icon + "\">");
$("#description").html(description);
$("#humidity").html(humidity);
$("#wind").html(wind);
$(".celsius").html(celsius);
$(".fahrenheit").html(fahrenheit);
//today forecast in C
var todayMaxTemp = data.daily.data[0].temperatureMax.toFixed(0);
var todayMinTemp = data.daily.data[0].temperatureMin.toFixed(0);
var todayIcon = "wi wi-forecast-io-" + data.daily.data[0].icon;
$("#todayC").html("<br>"+ todayMinTemp + "°/"+ todayMaxTemp +"° <br> <i class=\"" + todayIcon + "\" id=\"smallIcon\">");
//today forecast in F
var todayMaxTemp = (data.daily.data[0].temperatureMax *9/5+32).toFixed(0);
var todayMinTemp = (data.daily.data[0].temperatureMin *9/5+32).toFixed(0);
var todayIcon = "wi wi-forecast-io-" + data.daily.data[0].icon;
$("#todayF").html("<br>"+ todayMinTemp + "°/"+ todayMaxTemp +"° <br> <i class=\"" + todayIcon + "\" id=\"smallIcon\">");
//tomorrow forecast in C
var tomorrowMaxTemp = data.daily.data[1].temperatureMax.toFixed(0);
var tomorrowMinTemp = data.daily.data[1].temperatureMin.toFixed(0);
var tomorrowIcon = "wi wi-forecast-io-" + data.daily.data[1].icon;
$("#tomorrowC").html("<br>"+ tomorrowMinTemp + "°/"+ tomorrowMaxTemp +"° <br> <i class=\"" + tomorrowIcon + "\" id=\"smallIcon\">");
//tomorrow forecast in F
var tomorrowMaxTemp = (data.daily.data[1].temperatureMax *9/5+32).toFixed(0);
var tomorrowMinTemp = (data.daily.data[1].temperatureMin *9/5+32).toFixed(0);
var tomorrowIcon = "wi wi-forecast-io-" + data.daily.data[1].icon;
$("#tomorrowF").html("<br>"+ tomorrowMinTemp + "°/"+ tomorrowMaxTemp +"° <br> <i class=\"" + tomorrowIcon + "\" id=\"smallIcon\">");
//after tomorrow forecast in C
var afterTomorrowMaxTemp = data.daily.data[2].temperatureMax.toFixed(0);
var afterTomorrowMinTemp = data.daily.data[2].temperatureMin.toFixed(0);
var afterTomorrowIcon = "wi wi-forecast-io-" + data.daily.data[2].icon;
$("#afterTomorrowC").html("<br>"+ afterTomorrowMinTemp + "°/"+ afterTomorrowMaxTemp +"° <br> <i class=\"" + afterTomorrowIcon + "\" id=\"smallIcon\">");
//after tomorrow forecast in F
var afterTomorrowMaxTemp = (data.daily.data[2].temperatureMax *9/5+32).toFixed(0);
var afterTomorrowMinTemp = (data.daily.data[2].temperatureMin *9/5+32).toFixed(0);
var afterTomorrowIcon = "wi wi-forecast-io-" + data.daily.data[2].icon;
$("#afterTomorrowF").html("<br>"+ afterTomorrowMinTemp + "°/"+ afterTomorrowMaxTemp +"° <br> <i class=\"" + afterTomorrowIcon + "\" id=\"smallIcon\">");
//after after tomorrow forecast in C :))
var afterAfterTomorrowMaxTemp = data.daily.data[3].temperatureMax.toFixed(0);
var afterAfterTomorrowMinTemp = data.daily.data[3].temperatureMin.toFixed(0);
var afterAfterTomorrowIcon = "wi wi-forecast-io-" + data.daily.data[3].icon;
$("#afterAfterTomorrowC").html("<br>"+ afterAfterTomorrowMinTemp + "°/"+ afterAfterTomorrowMaxTemp +"° <br> <i class=\"" + afterAfterTomorrowIcon + "\" id=\"smallIcon\">");
//after after tomorrow forecast in F :))
var afterAfterTomorrowMaxTemp = (data.daily.data[3].temperatureMax *9/5+32).toFixed(0);
var afterAfterTomorrowMinTemp = (data.daily.data[3].temperatureMin *9/5+32).toFixed(0);
var afterAfterTomorrowIcon = "wi wi-forecast-io-" + data.daily.data[3].icon;
$("#afterAfterTomorrowF").html("<br>"+ afterAfterTomorrowMinTemp + "°/"+ afterAfterTomorrowMaxTemp +"° <br> <i class=\"" + afterAfterTomorrowIcon + "\" id=\"smallIcon\">");
}, 2200); // end of timeout
//temp toggle
$(".fahrenheit-btn").on("click", function() {
$(".celsius").hide();
$("#todayC").hide();
$("#tomorrowC").hide();
$("#afterTomorrowC").hide();
$("#afterAfterTomorrowC").hide();
$(".fahrenheit").show(fahrenheit);
$("#todayF").show();
$("#tomorrowF").show();
$("#afterTomorrowF").show();
$("#afterAfterTomorrowF").show();
});
$(".celsius-btn").on("click", function() {
$(".fahrenheit").hide();
$("#todayF").hide();
$("#tomorrowF").hide();
$("#afterTomorrowF").hide();
$("#afterAfterTomorrowF").hide();
$(".celsius").show(celsius);
$("#todayC").show();
$("#tomorrowC").show();
$("#afterTomorrowC").show();
$("#afterAfterTomorrowC").show();
});
// end of temp toggle
});
});
} else {
alert("We couldn` retrieve your location, please check your location settings");
};
//date //
var months = new Array(12);
months[0] = "January";
months[1] = "February";
months[2] = "March";
months[3] = "April";
months[4] = "May";
months[5] = "June";
months[6] = "July";
months[7] = "August";
months[8] = "September";
months[9] = "October";
months[10] = "November";
months[11] = "December";
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth(); //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
today = dd + '. ' + months[mm] + ', ' + yyyy;
$(".date").html(today);
//end date
});
