Eleazar Resendez

Just some coding blurbs

Show the local Weather a FreeCodeCamp Challenge

1 month ago · 1 MIN READ
#RESTful APIs  #jQuery 

Después de mucho tiempo pude continuar con los challenges de FreeCodeCamp.

Para realizar el proyecto se utilizó la API de Wunderground.

La verdad es que todo es muy simple, la mayor parte del día convivo con PHP, por lo que esto me ayuda poco a poco a mejorar habilidades en frontend.

<html>
<body>
<h1>A Weather App by Eleazar Resendez</h1>
<div class="weather">
<p id="location"></p>
<p>
<span id="temp"> </span> 
<span class="temp" id="symbol">c</span>
</p>
<img id="icon"></img>
</div>
</body>
<footer>
<p>API used in this project: <a target="_blank" href="https://www.wunderground.com/">Weather Underground</a></p>
</footer>
</html>

Un poco de css:

body {
background-color: black;
color: white;
text-align: center;
}

h1 {
font-family: 'Bigshot One',serif;
font-size: 58px;
}

.weather{
font-family: 'Pacifico', serif;
font-size: 38px;
}

.temp{
cursor:pointer;
color:#006dcc;
}

Y javascript básico:

var Geo = {};
var symbol = 'c';
var currentSymbol = '';

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success,error);
} else {
alert('Geolocation is not supported');
}

$("#symbol").click(function(){
var symbol = $("#symbol").text();
if (symbol == 'c'){
$("#symbol").text('f');
navigator.geolocation.getCurrentPosition(success,error);
} else {
$("#symbol").text('c');
navigator.geolocation.getCurrentPosition(success,error);
}
});

function error() {
alert("We couldn't find you!");
}

function success(position) {
Geo.lat = position.coords.latitude;
Geo.lng = position.coords.longitude;
var key = 'eecd630d429cfacc';
var weather = '//api.wunderground.com/api/'+ key +'/forecast/geolookup/conditions/q/' + Geo.lat + ',' + Geo.lng + '.json';

var symbol = $("#symbol").text();
currentSymbol = symbol == 'c' ? 'c' : 'f';

$.ajax({
type: "GET",
url: weather,
success: function(data) {
$('#location').html(data['location']['city']);
if(currentSymbol == 'c'){
$('#temp').html(data['current_observation']['temp_c']);
} else {
$('#temp').html(data['current_observation']['temp_f']);
}
$('#icon').attr('src', data['current_observation']['icon_url']);
},
error: function(data){
$('.text').text(JSON.stringify(data));
},
dataType: 'jsonp',
});
}

URL para ver el proyecto en: Codepen.io

···

Eleazar Resendez

Eleazar is a very passionate Web Application Developer and Software Engineer, constantly experimenting with new technologies and striving to better as developer and the development community as a whole.
comments powered by Disqus


Proudly powered by Canvas · Sign In