" Weather by HARUN PEHLİVAN API "
Bootstrap 3.0.0 Snippet by harunpehlivan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React
Boostrap Weather + Display Flex

Questions / Comments: