Weather API app

Weather API app


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


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


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:

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;

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


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'%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’.


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 = "' + lat + ' &lon= ' + long + '&app-d='jj4mkfmkjmk4tm4k5tk4tm'";


var weatherApi = ""+long+"&lat="+lat;

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


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


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


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 '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. 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.