Weather API app

1

Hey Guys
Need Help again
I want to know what’s wrong with my Weather API
I followed a youtube tutorial but it doesn’t work
https://codepen.io/Mohamedelmasry/pen/rpMbqj

2

i get no response from your ip url, https://ip-api/com/json - nothing when i type it in the browser either

3

Yeah, first thing to check when things are not working as expected: The Dev console.

You can see this is throwing:

jquery.min.js:4 GET https://ip-api/com/json net::ERR_NAME_NOT_RESOLVED

It seems as if you are trying to use this API request to pull a lat/long.

I would instead use Geolocation for this. More info here: Geolocation API - Web APIs | MDN

A ‘brute force’ example of this, with no error checking, etc, would be as follows:

var lat;
var long;
navigator.geolocation.getCurrentPosition(successfulLocation, failedLocationRequest);
function successfulLocation (position) {
lat = position.coords.latitude;
long = position.coords.longitude;
console.log(lat);
console.log(long);

This will display lat/long on your console and provide you will accessible variables.

4

After that you seem to have some quote mismatching errors near/around line 73. Even feeding in some sample values for lat/long though your next API request fails as follows:

jquery.min.js:4 GET https://api.openweathermap.org/data/2.5/weather?lat='%20+%20lat%20+%20'%20&lon=%20'%20+%20long%20+%20'&app-d='jj4mkfmkjmk4tm4k5tk4tm' 401 (Unauthorized)

I’m not familiar with this particular API off the top of my head, but would suggest you re-examine the required format/address required as you are getting an ‘unauth’.

5

Hey, I recently got mine to work by switching to a different api.
It should be easy to switch over to
instead of declaring:

var weatherApi = "https://api.openweathermap.org/data/2.5/weather?lat=' + lat + ' &lon= ' + long + '&app-d='jj4mkfmkjmk4tm4k5tk4tm'";

try

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

Also, you may have to use json.weather[0].description to get the type of weather ( rain, fog, clear, etc…)
I hope that helps!

1 Like
6

You miss an “i”. It’s “appid” no “app-d”.

7

Thanks for help but I have tried to do that it doesn’t work for me ??

8

As abalducci mentions, you neeeeeeeeeed to check your dev console. This is the most important tool to a web developer. Most browsers, you can open it with ctrl-sft-i or ctrl-shft-j. This is the most powerful debugging tool your have.

When I run your code, I get:

jquery.min.js:4 Mixed Content: The page at 'https://codepen.io/Mohamedelmasry/pen/rpMbqj?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS.

This telling you that codepen doesn’t like you to use an unsecured (http) connection and will only allow secured (https). Unfortunately ip-api only has unsecured, so you cannot use it with codepen.

There are a couple of ways to do this with https. I outlined two of them in a sample pen a while back. The pen outputs to the dev console. Of the two, geolocation (also mentioned by abalducci) is probably the most common.