Random Quote Generator... why doesn't it work in codepen?

1

So I’m trying to finish up the random quote generator and I have it working perfectly when I run it locally. I prefer to work with Sublime Text rather than directly in codepen so I typically do all of my coding there then copy/paste my html, css, and js into the corresponding sections of codepen.

Anyway, I’ve got my quote generator working flawlessly when I run my index.html directly in my browser. However, when I do it through codepen it does not display my quotes. Everything displays correctly as far as colors, buttons, etc but the quotes aren’t generating. I even copy/pasted the stuff in my head section on my local document into the head section of codepen.

my pen

Any ideas? It’s getting a bit frustrating that I finally got everything to work but something just isn’t jiving in codepen.

2

Open up you pen in full screen viewing mode, and also open up your browser’s developer tools and try to get a quote. You’ll see something like the following:

Mixed Content: The page at ‘https://codepen.io/pbrouse34/full/PpaGYo/’ was loaded over HTTPS, but requested an insecure script ‘http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=jQuery31005630235496941358_1490470908991&_=1490470908992’. This request has been blocked; the content must be served over HTTPS.

This Google Developers Article will get you started in finding the answer. ( just to note people run into this frequently, and the FCC forums have a lot of posts on the issue if you do a search )

3

Ugh, I knew it was going to be something simple. Thanks.