Getting the data from the weather API, inserting the values, including the correct C or F unit into the web page was the easy bit. Now I am having difficulty knowing how to get the temperature data out of the function and using it in an event handler. I got a version of the app working–without the conversion button, but the code was messy.
I have included the js to where it started to become “messy”. My question is "How do I pass the temperature value into another function so it can be bound to an event handler?
Thank you! Sometimes I cant see the tress for the forest. I can see success not far away now.
. So now I have the conversion button working with the event button. One thing that confuses me though with global variables, I get a reference error if I try to see the value assigned to global vars (console.log), after they have been changed within a function–e.g. myLat, myLng.
BUT adding in the geolocator coords is now causing me some difficulty. (I thought this would be easy!) I appear to be building the correct URL, but the response to the Get request is coming back with a 404 error.
I had problems with the lat and lon vars being assigned values after the API request–so I placed the API request/send/respond in a new function. I think it’s another scope issue.
var api = "https://fcc-weather-api.glitch.me/api/current?";
var currentUnits = "C";
var currentTemp = "";
var myLat = "";
var myLng = "";
/////// determine your lat and lon coords ////////////
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
myLat = "lat=" + position.coords.latitude; //global var
myLng = "lon=" + position.coords.longitude; //global var
getWeather(myLat, myLng);
});
} else {
console.log("Geolocation is not supported by this browser.");
} //END geolocation
////////////// request the weather API/////////////////
function getWeather(myLat, myLng) {
var requestURL = "'" + api + myLng + "&" + myLat + "'";
var request = new XMLHttpRequest();
console.log(requestURL); ** ** ** ** ** //URL looks correct here
request.open('GET', requestURL); ** ** * ///////////////getting a 404 error
request.responseType = 'json';
request.send();
request.onload = function() {
var allWeather = request.response;
console.log(allWeather); ** ** ** ** ////////////////////failed to get the json object
currentTemp = allWeather.main.temp; //global var
myWeather(allWeather);
weatherIcon(allWeather);
myCountryUnit(allWeather);
} // END request onload
} //END getWeather
Yes. After earnestly looking at typeof and reading about data types; I searched google for " URL gets a %27 added?" All about being an inexperienced learner. I think I will need a “breather” before tackling the next challenge.