<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="my-container">
<h1>Local Weather</h1>
<img id="wthicon" src=#><label id="location">Pais,Ciudad</label><br>
<p id="clima">Clima:</p>
<p id="clouds">Nubusidad:</p>
<p id="temp">Temp:</p>
<p id="humedad">Humedad:</p>
<button class="unit-btn btn btn-primary">ºC / ºF</button>
</div>
</div>
</div>
</div>
/*Downloaded from https://www.codeseek.co/puma210/weather-app-ip-api-oxJBjg */
body {
font-family: "Arial";
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.my-container {
color: white;
font-weight: 800;
font-size: 21px;
text-shadow: 1px 1px 1px black;
text-align: center;
border: transparent white 1px;
border-radius: 35px;
padding: 15px;
margin-top: 30%;
background-color: rgba(100, 100, 100, 0.10);
box-shadow: 0 0 5px rgba(50, 50, 50, .05), 0 1px 3px rgba(50, 50, 50, .2), 0 3px 5px rgba(50, 50, 50, .2), 0 5px 10px rgba(50, 50, 50, .2), 0 10px 10px rgba(50, 50, 50, .2), 0 20px 20px rgba(50, 50, 50, .3);
;
}
button {
margin: 10px;
padding: 5px;
}
.error {
background-image: url("https://i.imgur.com/VfzGbHw.jpg");
background-color: #F26A16;
color: white;
}
.soleado {
background-image: url("https://i.imgur.com/cKqb747.jpg");
background-color: #59B5F7;
color: white;
}
.nublado {
background-image: url("http://www.filetobackup.com/wp-content/uploads/2014/08/Sky-Cloud-Blue-Clouds-Hills-Desert-Nature-Free-Hd-323828.jpg");
background-color: #C5D6D6;
color: #FFFFFF;
}
.lluvioso {
background-image: url("https://i.imgur.com/EKyvsTh.jpg");
background-color: #819191;
color: black;
}
.nevando {
background-image: url("https://i.imgur.com/vI3GYu3.jpg");
background-color: #F5FAFA;
color: white;
}
.tormenta {
background-image: url("https://i.imgur.com/bTwpb2c.jpg");
background-color: #444D4D;
color: white;
}
/*Downloaded from https://www.codeseek.co/puma210/weather-app-ip-api-oxJBjg */
var position;
var currentUnit = 'metric';
$(document).ready(function() {
$.getJSON('http://www.ip-api.com/json',success)
.fail(error);
$('.unit-btn').on('click', switchUnits);
});
//User story 1: Get the user location
function error(err) {
console.warn('Error-> '+err.code+': '+err.message);
alert('Location response error: Reload the page');
};
function success(pos) {
position = pos;
getWeatherInfo(position.lat, position.lon, currentUnit);
};
//User story 2: Get the weather in user location
function getWeatherInfo(lat, long, unit) {
var apiUrl = 'http://api.openweathermap.org/data/2.5/weather?';
var key = 'adf41a005e9337bc7f87657d4385e73d';
var queryData = {
lat: lat,
lon: long,
units: unit,
APPID: key
};
var proxy = 'https://crossorigin.me/';
var finalURL = proxy + apiUrl;
console.log(finalURL);
$.getJSON(apiUrl , queryData,showWeather )
.fail(function(jqxhr, textStatus, error){
console.warn('Error-> '+textStatus+': '+error);
alert('Api response error: This app doesnot suppert https protocol');
});
};
function showWeather(json) {
var iconUrl = 'http://openweathermap.org/img/w/' + json['weather'][0].icon + '.png';
var tempUnit = currentUnit==='metric'?'ºC':'ºF';
$('#location').html(json['name'] + ', ' + json['sys'].country);
$('#clima').html(json['weather'][0].main);
json['clouds'].all ? $('#clouds').html('Clouds: '+json['clouds'].all+'% '+json['weather'][0].description) : $('#clouds').hide();
$('#wthicon').prop('src', iconUrl);
$('#temp').html('Temp: '+json['main'].temp +' '+tempUnit);
$('#humedad').html('Humidity: '+json['main'].humidity + '%');
adaptPageStyle(json['weather'][0].id);
}
function adaptPageStyle(id) {
var bodyStyleClass = getBodyStyleClass(id);
$('body').hasClass('') ?
$('body').addClass(bodyStyleClass) :
!$('body').hasClass(bodyStyleClass) ?
$('body').toggleClass(bodyStyleClass) :
null;
};
function getBodyStyleClass(id) {
var styleClass = '';
//error
if(id === 999){
styleClass = 'error';
}//despejado
else if (id === 800) {
styleClass = 'soleado';
} //nubes
else if (id > 800 && id < 804) {
styleClass = 'nublado';
} //nieve
else if (id >= 600 && id <= 622) {
styleClass = 'nevando';
} //lluvia
else if (id >= 500 && id <= 531) {
styleClass = 'lluvioso';
} //tormenta
else if (id >= 200 && id <= 232) {
styleClass = 'tormenta';
} else {
styleClass = '';
console.log('API id response unexpected');
//Vista estado error
}
return styleClass;
}
//User story 3:
function switchUnits() {
var unitWished = currentUnit === 'metric' ? 'imperial' : 'metric';
getWeatherInfo(position.lat, position.lon, unitWished);
currentUnit = unitWished;
}