Check out my weather app on Code Pen
Here's the code for my weather app (apologies if it's overwhelming):
var button=document.getElementById('submit');
var zipcode;
var lat;
var lng;
var weather;
var iconId;
var temp;
// Function to get the value entered by the user
button.addEventListener('click',getValue);
function getValue(event){
event.preventDefault();
zipcode=document.getElementById('zipcode').value;
getCity();
}
// API request to Google Geocode
function getCity(){
var req=new XMLHttpRequest;
req.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
var myData=JSON.parse(this.responseText);
var myCity=myData.results[0].address_components[1].short_name;
lat=myData.results[0].geometry.location.lat;
lng=myData.results[0].geometry.location.lng;
document.getElementById('lat').innerHTML=lat;
document.getElementById('lng').innerHTML=lng;
document.getElementById('city').innerHTML=myCity;
}//if function end
}//onreadystate function end
req.open('GET','https://maps.googleapis.com/maps/api/geocode/json?address='+zipcode, true);
req.send();
getWeather();
}
// API request to Dark Sky Weather
function getWeather(){
var request=XMLHttpRequest;
request.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
var myWeather=JSON.parse(this.responseText);
weather=myWeather.currently.summary;
document.getElementById('weather').innerHTML=weather;
console.log(myWeather);
}//if ends
}//onready end
request.open('GET','https://api.darksky.net/forecast/6231bad7d2bf09aa53301a4227b7c1af/'+lat+','+lng, true);
request.send();
}<form>
<input type=text placeholder='zipcode' id='zipcode'></input>
<input type='submit' id='submit'></input>
</form>
<ol>
<li>City Name: <span id='city'></span></li>
<li>Latitude: <span id='lat'></span></li>
<li>Longitude: <span id='lng'></span></li><br>
<li>Temperature(F): <span id='temp'></span></li>
<li>Icon: <span id='icon'></span></li>
<li>Weather: <span id='weather'></span></li><br>
<li>Wind(mph): <span id='wind'></span></li>
<li>Sunrise: <span id='sunrise'></span></li>
<li>Sunset: <span id='sunset'></span></li>
</ol>Explanation of my code: You input a zipcode and click 'submit', triggering an Event Listener that calls the 'getValue' function, storing the zipcode and then executing the 'getCity' function to convert the zipcode into the City Name, Latitude, and Longitude.
I initially placed the 'getWeather' function immediately after 'getCity' in the 'getValue' function definition, but I realized that wouldn't allow enough time to retrieve the Latitude and Longitude values from the first API. So, I placed it inside the 'getCity' function definition.
While the 'getCity' function successfully converts the zipcode into the City Name and Latitude/Longitude, the issue arises with the 'getWeather' function, which should provide weather conditions like 'Rainy'.
Error in Chrome Console: https://i.sstatic.net/rmEBR.png
EDIT: I added the 'new' keyword: var request= new XMLHttpRequest;. That was a simple typo. Here is the new error:
https://i.sstatic.net/q7FeS.png
EDIT 2: MAJOR DISCOVERY: I believe I know the issue. However, I'm unsure how to resolve it. It's a SCOPE problem! When I try console.log(lat+' and '+lng); in the 'getWeather' function, the console shows 'undefinedandundefined'. The only place I can access the Latitude and Longitude values is inside the 'getCity' function, where the first API converts the entered zipcode to Lat/Lng.