Random Quote Machine Doesn't work in Codepen

I originally developed my Random Quote Machine in my editor and ajax calls and twitter buttons worked fine. When I transferred my code to codepen the javascript stopped working. I’ve read a decent amount about fixing but nothing has worked so far. I’ve tried switching to HTTPS but I’m not sure that I did it properly. I’ve tried appending things to the URL. I’ve even read that you need to use jquery to make the ajax calls. The console on my browser is throwing ACCESS-CONTROL-ALLOW-ORIGIN errors but I’m still not sure if thats the only problem or if there is something else preventing my project form working on codepen. Any insight will help. Thanks.

Here is my project link:

You definitely need the https prefix to avoid the issue with Codepen using https and you trying access an unsecure page (http). The forismatic API will only work using JSONP. Do some research on how to use JSONP with $.get or with jQuery in general. It is possible to do. I would recommend using $.ajax, because you will have more control over optional settings. $.get is a specific use of $.ajax.

EDIT: I had only quickly reviewed your code before my first comment above, but after reviewing your code again, I realized you are trying to use vanilla JavaScript. I will post back shortly with some advice.

1 Like

Ok. It seemed a lot of the solutions I read about used JSONP and jQuery. Thanks for your response!

jQuery makes doing API with JSONP method much simpiler. I did find a SO thread (see below) which explains how to do it via vanilla JS. The title of the thread is misleading, because technically the XMLHttpRequest is not used. It is still very good information if you are interested in a vanilla JS solution.

Thanks a lot! I think this will in fact be useful! I’m a little hesitant to try and dive into jQuery so soon because I’m really only a beginner in vanilla JS so I’d like to have a firmer grasp of the actual language before I start paying a lot of attention to frameworks.