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

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.

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 )

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