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!
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
Thanks, Ben.I removed the background image which is considered as an insecure image.
Any advice on making the button functional?
Oh, my bad 
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.
How and where I can modify the link?
Just anywhere you link to it, make sure you use http.
Thanks Ben, it works perfect now!