Several more questions about weather app

Several more questions about weather app
0

#1

Hi, I was working further on my weather app and hit some snags. Here’s the link to the project that I’ve done so far: https://codepen.io/glennqhurd/pen/VrQgMz

There are two problems right now, one is that the jQuery I’m using doesn’t change the img src attribute. I checked the JSON value for weather[0].main and it says Clouds so it should match the if statement but the img doesn’t get changed. If there’s a syntax error or other similar issue I’d really like to know.

The second problem is that the API returns temperature around 80 degrees Fahrenheit in Atlanta, GA. The weather definitely is NOT that warm and when I was visiting my brother in VA it was also around that level. I checked the JSON values for temperature and that was what it returned, even though the Latitude and Longitude for both locations were different from each other and as far as I can tell correct.

Thanks for your time!


#2

You have an i element with id=“weather_icon” and a src attribute, but you need an img element (no closing tag needed).

The reason you get the wrong temperature is because you are passing empty strings to both lat and lon in your $,get url (first parameter). Why are they empty strings? Because the navigator.geolocation.getCurrentPosition function is asynchronous and so it does not wait until the response comes back containing the latitude and longitude. It allows code after it to keep running until it gets a response back, and then the callback function specified inside it executes. Both lat and lon start as empty strings, so when you build your url with:

"https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon

they still are blank strings. I believe if no valid latitude and longitude values are passed to the weather API, then it defaults to Japan weather, which is I guess why you are seeing the 80 degrees F.

How to fix? You need to move all the code involving the $,get to be inside the navigator.geolocation.getCurrentPosition callback function.


#3

Awesome, I’ll make those changes right away, thanks!


#4

Yes that works, now I just have to test it in multiple areas in case there’s an issue w/ the images. Thanks again!