JS for my Random Quote Machine doesn't work on CodePen

Hi, first time posting here on the forums. So I got just about everything completed with my Random Quote Machine, although I didn’t use CodePen during the development process and just wrote everything up in my text editor (Notepad++), testing directly in my browser (Firefox) as I went along. Got it mostly done, and everything works directly in my browser, no issues whatsoever.

However, after I copied all of my HTML, CSS, and JS code over to CodePen, my Get New Quote button stopped working, and I could see that the error handling callback function on both my $.getJSON and $.ajax functions kept getting called.

I set up jQuery and Bootstrap’s JS in my CodePen so I’m really not sure why it’s not working, I don’t suppose anyone could take a look and tell me if I’m missing something obvious? Thanks!

My CodePen is here: https://codepen.io/astv99/pen/VjxAqp

1 Like

@astv99 I believe your getting the error about CORS because you’re connected to Codepen via https but you’re trying to ajax to an non-https URL.

If you remove the “s” from your code pen url and access it from below link it should work


Thanks for the tips, I think I’ll just use the non-HTTPS version of CodePen for now to get around the issue since that’s the simplest solution, thanks! The CORS issue is certainly aggravating, kept running into that when I first started trying to use the Forismatic API, was probably the most time-sucking part of this project. :wink:

You may like this new API a fellow camper just released that removes some of the headaches associated with CORS.


You saved me from going crazy. I’ve tried several projects on codepen which didn’t work but should have. Changing https to http did the trick!

I try to change the url on my pen to http but chrome just loads it with the ‘s’ anyway. I also clicked that link to the other API thinking I would just use that one instead but the link gives an error.