<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/vinceumo/pen/JEZLLY?depth=everything&order=popularity&page=84&q=pack&show_forks=false" />
<script src="https://use.fontawesome.com/b4c1d3f133.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style class="cp-pen-styles">body {
min-height: 100vh;
background: #6dbcdb;
background: -moz-linear-gradient(-45deg, #6dbcdb 0%, #fc4349 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #6dbcdb), color-stop(100%, #fc4349));
background: -webkit-linear-gradient(-45deg, #6dbcdb 0%, #fc4349 100%);
background: -o-linear-gradient(-45deg, #6dbcdb 0%, #fc4349 100%);
background: -ms-linear-gradient(-45deg, #6dbcdb 0%, #fc4349 100%);
background: linear-gradient(135deg, #6dbcdb 0%, #fc4349 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dbcdb', endColorstr='#fc4349', GradientType=1 );
}
.clear-float {
clear: both;
}
.bold-text {
font-weight: bold;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.weather-icon {
max-width: 193px;
width: 100%;
}
.capitalize {
text-transform: capitalize;
}
.app-box {
max-width: 400px;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 50px;
text-align: center;
background-color: #2C3E50;
box-shadow: 8px 9px 40px -15px #000;
}
.app-box--search {
background-color: #FFFFFF;
text-align: left;
padding: 5px 10px;
}
.app-box--search input[type="text"]:focus, .app-box--search textarea:focus {
outline: none;
border-bottom: 1px solid #6DBCDB;
}
.app-box--search input {
border: none;
color: #6DBCDB;
width: 80%;
float: left;
}
.app-box--search input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #bfe2ef;
}
.app-box--search input::-moz-placeholder {
/* Firefox 19+ */
color: #bfe2ef;
}
.app-box--search input:-ms-input-placeholder {
/* IE 10+ */
color: #bfe2ef;
}
.app-box--search input:-moz-placeholder {
/* Firefox 18- */
color: #bfe2ef;
}
.app-box--search .btn {
background-color: #FFFFFF;
color: #FC4349;
padding: 0;
font-size: 1.2em;
float: right;
}
.app-box--icon-box {
padding: 25px;
font-size: 1em;
}
.app-box--icon-box .info {
color: #FFFFFF;
margin-bottom: 0;
}
.app-box--icon-box #location {
font-size: 1.7em;
}
.app-box--icon-box .icon-info {
color: #FFFFFF;
text-transform: capitalize;
}
.app-box--temp-box {
padding: 25px;
position: relative;
background-color: #FFFFFF;
color: #2C3E50;
}
.app-box--temp-box .btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.app-box--temp-box #switch-btn {
position: absolute;
top: -30px;
right: 12px;
display: block;
height: 60px;
width: 60px;
line-height: 60px;
border-radius: 50%;
background-color: #FC4349;
color: #FFFFFF;
box-shadow: 8px 9px 40px -7px #000;
font-size: 20px;
font-weight: 400;
padding: 0;
-webkit-transition: all 0.5s;
/* Safari */
transition: all 0.5s;
transition-timing-function: ease-in-out;
}
.app-box--temp-box #switch-btn:hover {
box-shadow: 8px 9px 40px -1px #000;
}
.app-box--temp-box p {
margin: 0;
}
.app-box--temp-box #temperature {
font-size: 6em;
}
.app-box--temp-box .weather-details {
margin-bottom: 25px;
}
#app-box--temp-box--forecast {
padding: 0 20px;
margin-top: 50px;
}
#app-box--temp-box--forecast .forescast-block {
margin-bottom: 25px;
display: flex;
}
#app-box--temp-box--forecast .forescast-img {
width: 100%;
}
#app-box--temp-box--forecast .forescast-info {
display: flex;
align-items: center;
}
#app-box--temp-box--forecast .forescast-info p {
text-align: left;
line-height: 1.05;
}
#credits {
list-style-type: none;
text-align: center;
padding-left: 0;
}
#credits a {
color: #FFFFFF;
font-weight: normal;
}
@media screen and (max-width: 295px) {
.app-box--icon-box {
padding: 5px;
}
.app-box--temp-box {
padding: 5px;
}
.app-box--temp-box #temperature {
font-size: 4em;
margin-bottom: 5px;
margin-top: 20px;
}
}
</style></head><body>
<div class="container-fluid">
<div class="app-box">
<div class="app-box--search">
<input type ="text" id="my-city" placeholder="Paris, France..."/>
<button class="btn" onClick="changeWeather();"><i class="fa fa-search"></i></button>
<div class="clear-float"></div>
</div>
<div class="app-box--icon-box">
<p class="info" id="location"><span id="current-city">Ooops Couldn't find your location please use the search bar.</span>, <span id="current-country"></span></p>
<img id="current-icon" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
<p class="icon-info"><span id="current-weather-description"></span></p>
</div>
<div class="app-box--temp-box">
<button class="btn btn-circle-lg" id="switch-btn"><span id="degree-f">°F</span></button>
<p id="temperature"><span id="current-temp"></span></p>
<p class="weather-details">
<span class="bold-text">Wind:</span> <span id="current-wind"></span><span id="wind"></span>
<span id="current-wind-deg"></span><br />
<span class="bold-text">Humidity:</span> <span id="current-humidity"></span>
</p>
<div id="app-box--temp-box--forecast">
<div class="row forescast-block">
<div class="col-xs-5 vcenter"><img id="forescast-icon0" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
</div><!--
--><div class="col-xs-7 forescast-info vcenter">
<p>
<span class="bold-text" id="forecast-day0"></span><br /><span id="forecast-temp-min0"></span> / <span id="forecast-temp-max0"></span><br />
<span class="capitalize" id="forecast-temp-description0"></span><!--<br />
Wind: <span id="forecast-wind-speed0"></span><span id="forecast-wind-dir0"></span><br />
Humidity: <span id="forecast-humidity0"></span><br />-->
</p>
</div>
</div>
<div class="row forescast-block">
<div class="col-xs-5 vcenter"><img id="forescast-icon1" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
</div><!--
--><div class="col-xs-7 forescast-info vcenter">
<p>
<span class="bold-text" id="forecast-day1"></span><br /><span id="forecast-temp-min1"></span> / <span id="forecast-temp-max1"></span><br />
<span class="capitalize" id="forecast-temp-description1"></span>
</p>
</div>
</div>
<div class="row forescast-block">
<div class="col-xs-5 vcenter"><img id="forescast-icon2" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
</div><!--
--><div class="col-xs-7 forescast-info vcenter">
<p>
<span class="bold-text" id="forecast-day2"></span><br /><span id="forecast-temp-min2"></span> / <span id="forecast-temp-max2"></span><br />
<span class="capitalize" id="forecast-temp-description2"></span>
</p>
</div>
</div>
<div class="row forescast-block">
<div class="col-xs-5 vcenter"><img id="forescast-icon3" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
</div><!--
--><div class="col-xs-7 forescast-info vcenter">
<p>
<span class="bold-text" id="forecast-day3"></span><br /><span id="forecast-temp-min3"></span> / <span id="forecast-temp-max3"></span><br />
<span class="capitalize" id="forecast-temp-description3"></span>
</p>
</div>
</div>
<div class="row forescast-block">
<div class="col-xs-5 vcenter"><img id="forescast-icon4" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
</div><!--
--><div class="col-xs-7 forescast-info vcenter">
<p>
<span class="bold-text" id="forecast-day4"></span><br /><span id="forecast-temp-min4"></span> / <span id="forecast-temp-max4"></span><br />
<span class="capitalize" id="forecast-temp-description4"></span>
</p>
</div>
</div>
<div class="row forescast-block">
<div class="col-xs-5 vcenter"><img id="forescast-icon5" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
</div><!--
--><div class="col-xs-7 forescast-info vcenter">
<p>
<span class="bold-text" id="forecast-day5"></span><br /><span id="forecast-temp-min5"></span> / <span id="forecast-temp-max5"></span><br />
<span class="capitalize" id="forecast-temp-description5"></span>
</p>
</div>
</div>
<div class="row forescast-block">
<div class="col-xs-5 vcenter"><img id="forescast-icon6" class="weather-icon" src="http://vincent-humeau.com/content/weather-app-icons/unknow.png" alt="weather icon"/>
</div><!--
--><div class="col-xs-7 forescast-info vcenter">
<p>
<span class="bold-text" id="forecast-day6"></span><br /><span id="forecast-temp-min6"></span> / <span id="forecast-temp-max6"></span><br />
<span class="capitalize" id="forecast-temp-description6"></span>
</p>
</div>
</div>
</div>
</div>
</div>
<ul id="credits">
<li><a href="http://www.vincent-humeau.com" target="_blank"><i class="fa fa-link" aria-hidden="true"></i> By Vincent Humeau</a></li>
<li><a href="https://www.behance.net/gallery/48402505/Free-Weather-Icons-Pack?" target="_blank"><i class="fa fa-cloud-download" aria-hidden="true"></i> Free Weather Icon Pack</a></li>
<li><a href="https://github.com/vinceumo/fcc_weather_app" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> See this project on Github</a></li>
<li><a href="https://openweathermap.org/" target="_blank"><i class="fa fa-sun-o" aria-hidden="true"></i> API from openweathermap.org</a></li>
</ul>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOuZKe47ehP6nW75pkP09HkcRVo9bQClI&libraries=places"></script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >var ipUrl = 'https://ip-api.com/json/';
var lat ='';
var lon ='';
var newLocation ='';
var openWeatherApiKey = 'a3669d1484b9378d17f7c339e446746d';
var openWeatherApiCurrent = 'https://api.openweathermap.org/data/2.5/weather?&appid='+openWeatherApiKey;
var openWeatherApiForecast = 'https://api.openweathermap.org/data/2.5/forecast/daily?q=&appid='+openWeatherApiKey;
var metric = 'metric';
var imperial = 'imperial';
var unit = '&units='+metric;
var today = new Date();
var icons = ['00broken-clouds.png','01clear-sky-day.png','02clear-sky-night.png','03few-clouds-day.png','04few-clouds-night.png','05light-rain-day.png','06light-rain-night.png','07mist-day.png','08mist-night.png','09scattered-clouds-day.png','10scattered-clouds-night.png','11shower-rain.png','12snow.png','13thunderstorm.png'];
var urlIcons = 'http://vincent-humeau.com/content/weather-app-icons/';
LocalWeather();
function LocalWeather(){
$.getJSON(ipUrl, function(data) {
lat = data.lat;
lon = data.lon;
var LocalWeather = '&lat=' + lat + '&lon=' + lon;
var openWeatherCurrentUrl = openWeatherApiCurrent + LocalWeather + unit;
var openWeatherForecastUrl = openWeatherApiForecast + LocalWeather +unit;
currentForecastWeather(openWeatherCurrentUrl, openWeatherForecastUrl);
});
}
function currentForecastWeather(currentURL, forecastURL){
$.getJSON(currentURL, function(data){
$("#current-city").html(data.name);
$("#current-country").html(data.sys.country);
changeIcon(data.weather[0].icon, "#current-icon");
$("#current-weather-description").html(data.weather[0].description);
$("#current-temp").html(Math.round(data.main.temp * 10)/10 +'°C');
$("#current-wind").html(data.wind.speed + ' meter/s');
$("#current-wind-deg").html(degToCompass(data.wind.deg));
$("#current-humidity").html(data.main.humidity + '%');
$.getJSON(forecastURL, function(data){
for (var i=0; i<7; i++) {if (window.CP.shouldStopExecution(1)){break;}
changeIcon(data.list[i].weather[0].icon, "#forescast-icon"+i);
dayOfWeek(data.list[i].dt,"#forecast-day"+i)
$("#forecast-temp-min"+i).html(Math.round(data.list[i].temp.min * 10)/10 + '°C');
$("#forecast-temp-max"+i).html(Math.round(data.list[i].temp.max * 10)/10 + '°C');
$("#forecast-temp-description"+i).html(data.list[i].weather[0].description);
}
window.CP.exitedLoop(1);
$('#switch-btn').click(function(){
if($(this).text() === '°F'){
for (var i=0; i<7; i++) {if (window.CP.shouldStopExecution(2)){break;}
$(this).text('°C');
$("#forecast-temp-min"+i).html(Math.round(((data.list[i].temp.min*2)+30) * 10)/10 + '°F');
$("#forecast-temp-max"+i).html(Math.round(((data.list[i].temp.max*2)+30) * 10)/10 + '°F');
}
window.CP.exitedLoop(2);
}
else {
for (var i=0; i<7; i++) {if (window.CP.shouldStopExecution(3)){break;}
$(this).text('°F');
$("#forecast-temp-min"+i).html(Math.round(data.list[i].temp.min * 10)/10 + '°C');
$("#forecast-temp-max"+i).html(Math.round(data.list[i].temp.max * 10)/10 + '°C');
}
window.CP.exitedLoop(3);
}
});
});
$('#switch-btn').click(function(){
if($(this).text() === '°F'){
$("#current-temp").html(Math.round(((data.main.temp*2)+30) * 10)/10 + '°F');
$("#current-wind").html(Math.round((data.wind.speed)*2.23694) + ' miles/h');
}
else {
$("#current-temp").html(Math.round(data.main.temp * 10)/10 + '°C');
$("#current-wind").html(data.wind.speed + ' meter/s');
}
});
});
}
function changeIcon(iconVar, iconDestination){
switch (weatherIcon = iconVar) {
case weatherIcon = '01d':
$(iconDestination).attr("src",urlIcons+icons[1]);
break;
case weatherIcon = '01n':
$(iconDestination).attr("src",urlIcons+icons[2]);
break;
case weatherIcon = '02d':
$(iconDestination).attr("src",urlIcons+icons[3]);
break;
case weatherIcon = '02n':
$(iconDestination).attr("src",urlIcons+icons[4]);
break;
case weatherIcon = '03d':
$(iconDestination).attr("src",urlIcons+icons[9]);
break;
case weatherIcon = '03n':
$(iconDestination).attr("src",urlIcons+icons[10]);
break;
case weatherIcon = '04d':
case weatherIcon = '04n':
$(iconDestination).attr("src",urlIcons+icons[0]);
break;
case weatherIcon = '09d':
case weatherIcon = '09n':
$(iconDestination).attr("src",urlIcons+icons[11]);
break;
case weatherIcon = '10d':
$(iconDestination).attr("src",urlIcons+icons[5]);
break;
case weatherIcon = '10n':
$(iconDestination).attr("src",urlIcons+icons[6]);
break;
case weatherIcon = '11d':
case weatherIcon = '11n':
$(iconDestination).attr("src",urlIcons+icons[13]);
break;
case weatherIcon = '13d':
case weatherIcon = '13n':
$(iconDestination).attr("src",urlIcons+icons[12]);
break;
case weatherIcon = '50d':
$(iconDestination).attr("src",urlIcons+icons[7]);
break;
case weatherIcon = '50n':
$(iconDestination).attr("src",urlIcons+icons[8]);
break;
default:$(iconDestination).attr("src",urlIcons+icons[1]);
break;
}
}
function degToCompass(i) {
var dir = Math.floor((i / 22.5) + 0.5);
var arr = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"];
if (i == null){
return '';
}
else{
return ' - '+arr[(dir % 16)];
}
}
function dayOfWeek(dt,dayDestination) {
var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var day = new Date(dt*1000); //*1000 to put it msecond
$(dayDestination).html(weekday[day.getDay()]);
}
function initializeGeocoding() {
var autocomplete = new google.maps.places.Autocomplete((document.getElementById('my-city')), {
types: ['(cities)']
});
}
$(document).keypress(function(e) {
if(e.which == 13) {
changeWeather();
}
});
function changeWeather() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("my-city").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lon = results[0].geometry.location.lng();
var LocalWeather = '&lat=' + lat + '&lon=' + lon;
var openWeatherCurrentUrl = openWeatherApiCurrent + LocalWeather + unit;
var openWeatherForecastUrl = openWeatherApiForecast + LocalWeather +unit;
currentForecastWeather(openWeatherCurrentUrl, openWeatherForecastUrl);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initializeGeocoding);
//# sourceURL=pen.js
</script>
</body></html>
