Codepen throws error on weather app

1

Hello,

I am finished with my weather app, it’s working fine on safari/ff, I was trying to upload it on codepen in order to share it on the forum but once I put up the js code it returned this error:

“Oh no! You clicked a broken link in a Pen!
The author of this Pen may have linked to the wrong URL, or there might be a typo somewhere.”

You can see what’s going on here: http://codepen.io/Bagongo/pen/OWXgVY

I really can’t track down the error since everything is working fine on browsers, I suppose it’s something related to codepen and using external apis, but I think I followed all the good practices I could find.

Can you spot some mistake I can’t?

Thanks!

2

Hi @Bagongo…I suggest adding console.log calls to write the URL’s you are constructing to the console. You can then cut and paste them into another browser window to validate that they are correct. I can see that your main screen is displayed for under a second before the 404 is thrown. This makes me assume that the issue is with the URL’s you are constructing to retrieve current weather conditions. I hope this helps out.

3

Thank you @jdmedlock. I think that’s the issue, but if I paste the urls into a new page I get exactly the data expected. No errors traceable this way… Any other idea?

4

Codepen does this from time to time for reasons i haven’t quite sussed out yet. The easy fix is to wrap all of the code in the document’s ready event handler, like so:

$(document).ready(function() {
// all of your code here
})

You’re going to find another problem with your code as is, though. The issue is that your browser’s security policy won’t run code downloaded from another site without some special unicorn magic. You can use the same service, but you’ll need to also use a CORS proxy. This most popular these days is https://cors-anywhere.herokuapp.com/, and you want to tack it onto the front of your URL

https://cors-anywhere.herokuapp.com/http://api.weatherstuff.com
1 Like
5

You might also try exporting to a native HTML page and running from within your browser using Developer tools so you can debug.

6

Thanks for the help guys!

@PortableStick I tried to wrap the code with $(window).on(“load”, function(){} but it didn’t work. Instead your
$(document).ready(function() {}) suggestion did the trick! Thank you!

7

Ah. The way you’d typically see it done with vanilla JS is

window.onload = function() {
// code here
}
8

Thanks @PortableStick. I totally missed this. Good work!