Random quote machine with API, button won't work

Random quote machine with API, button won't work
0

#1

I firstly edited this project on Webstorm. Everything works fine as I expected.
So I copied exactly the same code to codepen, then the “get quote” button stopped working.
I have been stuck for a whole day, I have tried different formats, none of them works.

Also, my console wont show any error to me. I have no idea which part I did wrong.Please help!


#2

If you check your browser console you will see the following error:

Mixed Content: The page at 'https://codepen.io/Chelsea-Li/pen/KaKzWo' was loaded over HTTPS, but requested an insecure image 'http://www.intrawallpaper.com/static/images/6825037-pattern-wallpaper_iKy7ia4.jpg'. This content should also be served over HTTPS.

You are not allowed to make http (insecure) request when you are connected to a secure https site (https://codepen.io).

This link will work: http://codepen.io/Chelsea-Li/pen/KaKzWo


#3

Thanks, Ben.I removed the background image which is considered as an insecure image.

Any advice on making the button functional?


#4

Oh, my bad :pensive: I copied the wrong text… The image only gives a warning, but is allowed. The real problem is that the api call (and http://yui.yahooapis.com/3.18.1/build/cssreset-context/cssreset-context-min.css) gets blocked because it is over http.

Mixed Content: The page at 'https://codepen.io/Chelsea-Li/pen/KaKzWo' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?jsonp=jQuery310015114906033688014_1483781118517&method=getQuote&format=jsonp&lang=en&_=1483781118518'. This request has been blocked; the content must be served over HTTPS.

Simply using http (http://codepen.io/Chelsea-Li/pen/KaKzWo) is the easiest solution.


#5

How and where I can modify the link?


#6

Just anywhere you link to it, make sure you use http.


#8

Thanks Ben, it works perfect now!