Weather app issue with Open Weather API after some time

1

Hello, dear colleagues!

I’ve been registered on FCC for a while now, with a few algorithms to finish and four projects to deliver to get the front-end certificate. Because of my full-time job, I had to stop studying programming for around four months (I work as a PR account executive for a tech company).

For my surprise, when I came back and started to review my old projects to get back on track, I noticed that my old Weather App with the Open Weather API stopped working. Well, I imagine this is something related to Codepen or the Open Weather itself, but I’d like to check if anyone experienced the same issue. If not, I’ll let you guys know as soon as I find out what’s going on.

"Mixed Content: The page at ‘https://codepen.io/michelmarechal/pen/KqRajd’ 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."

2

Yes, codepen switched to https. Https (secured) doesn’t like talking to http (unsecured).

Switch your url in the code from http://ip-api.com/json to https://ip-api.com/json.

3

Oops, maybe ip-api.com doesn’t take https. :frowning: We’ll have to find another route.

4

You can try Yahoo Weather API.

Its endpoint seems to be https.

5

This would work as well:

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(handlePosition);
  
  
});

function handlePosition(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    console.log(lat, lon);
}
6

Yeah, I’ve been searching and it seems that I must change a few things to make it work again. I’ll use the snippet suggested and add this to the Open Weather URL: https://cors-anywhere.herokuapp.com

Theoretically it will work, but I’ll let you guys know how thing went IRL

7

Alright! It’s working! Thank you guys, helped a lot!

8

How did you add the link to open weather URL? At the begining or end? With or without +, if you could provide a snippet of your code, it would be mucho appreciated.

9

To get location info, I used ipinfo.io and a jsonp flag to get around cors issues.

$.get("https://ipinfo.io", function(response) {
  // code goes here.
}, "jsonp");

Works pretty well.

10

Oh, my bad! I forgot the Codepen URL.

Here’s the code snippet that you need:

var lat, lon, url, temp, celsius, local, weather;  
function handlePosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    url = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=2b77894f4d93fee22ab72754606bfef6&units=metric";
      // get current weather
    $.getJSON(url, function(data) {
      local = data.name;
      temp = Math.round(data.main.temp);
      celsius = temp + " ºC";
      weather = data.weather[0].main;
      $("#wheater").text(celsius);
      $("#local").text(local);
});
}

As you can see, I set one var for Longitude and another one for Latitude. The final URL is built inside the function using the basic URL, Lat, Long and my API key. I called the API using jQuery as you can see.

To get the right location, I just used the function suggested by @ksjazzguitar:

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(handlePosition);
});
1 Like
11

Your Code Pen has been a lot of help! Just wondering wha the purpose of this line here? It’s interesting how you used querySelector and I’m trying to wrap my head around that.

var button = document.querySelector("#changeBtn");

12

In this case I only decided to keep this information in a variable, but wasn’t really necessary. This is something I wouldn’t do today, mainly because is not cool to mix jQuery and Vanilla. You can change this one for $("#changeBtn").text().

1 Like