Weather project: why won't api load in codepen?

I have been working on this project in my own text editor, and it runs successfully when launched from my own files on my computer. I uploaded it to CodePen to find it didn’t work. I read somewhere that OpenWeatherMap uses HTTP connection and CodePen uses HTTPS. I’m not sure if this is the case, and to be honest, I don’t fully comprehend what that means.

I’m having a lot of trouble understanding how to retrieve data from APIs. I’ve read a lot of documentation on it, watched Youtube videos, but it’s just not clicking.

I would appreciate it if you took a look at my code to see if the reason it’s not loading has something to do with it, or if I need to use a different weather API.

NEVERMIND - I solved this issue. I just needed to replace ‘http’ with ‘https’ in the api url in my code -_-

You are currently using the following url to access the API, because it is http and not https, that is why it is not working. You can actually use https with OpenWeatherMap and it will solve this problem.

If you look at the console (Ctrl+Shft+I in chrome) you would see this error message:

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.

1 Like