Estoy haciendo una web que muestra el clima local, ya me han dado una mano y me esta costando bastante terminarla, quisiera saber como cambiar la función alertMsg
para que me devuelva los datos del clima en vez de el link necesario para pedir los datos (que es lo que me devuelve ahora).
Éste es mi código (también disponible en codepen):
function getGeo(callback) {
//better to have variables inside the local scope of a function
//rather than the global scope. This prevents polluting the file
//with names that might end up being repeated
//initial values of null so that if nothing is passed you can check
//for that instance
var latitiude=null,
longitude=null;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
latitude= position.coords.latitude;
longitude=position.coords.longitude;
console.log(latitude, longitude);
link = 'api.openweathermap.org/data/2.5/weather?lat={'+latitude+'}&lon={'+longitude+'} ';
//this will pass link to the callback function
callback(link);
});
};
};
//alertMsg recieves the link from getGeo when used as a callback
//THIS IS THE FUNCTION I WANT TO CHANGE
function alertMsg(data) {
data = $.getJSON(data);
};
//callback from getGeo to alertMsg when button is clicked
document.getElementById("action-button-id").addEventListener("click", function(){
getGeo(alertMsg);
});
body {
background-color: lightblue;
}
/*remove once done*/
button.action-button{
position:relative;
margin-left:50%;
transform:translateX(-50%);
border: none;
background:lightblue;
outline:none;
font-weight: 400;
border: solid black 1px;
border-radius: 8px;
transition: all 0.4s ease-in;
cursor:pointer;
}
/*remove once done*/
button.action-button:hover{
background:black;
color:lightblue;
}
/* remove once done*/
button.action-button:active{
transform:translateX(-50%) scale(0.95);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<div class="container text-center">
<h1>Your local weather app</h1>
<h3 id="city">City</h3>
<h3 id="country">Country</h3>
<h4 id="temp">Temperature</h4>
<h4 id="weather">Weather</h4>
<h5 id="icon">Icon</h5>
<p>By <a href="https://www.freecodecamp.com/abeledovictor" target="_blank">Victor Abeledo</a></p>
</div>
<button class="action-button" id="action-button-id">
Click me for data
</button>