Random Quote Generator works locally, not in codepen


I’m a bit stuck on the Random Quote Generator. I just finished getting the API data, which works fine while developing it locally with two files: test.html and test.js


<!DOCTYPE html>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="showQuote"></div>
  <button id="getQuote">Get Quote</button>
<script src="test.js"></script>


var html = "Start";
var quoteURL = "http://quotes.rest/qod.json?category=inspire";

function getQuote() {  	
    $.getJSON(quoteURL, function (data) {
//      html += "<p>" + quote.quoteText + "</p>";
//		console.log( "success" );
//		console.log(data.contents.quotes[0].quote)
		var quote = data.contents.quotes[0].quote;
		var author = data.contents.quotes[0].author;

		$("#showQuote").html("quote: " + quote + ", author: " + author);

$("#getQuote").click(function() {

However, after I pasted the relevant code in my CodePen, it no longer works. Here’s my CodePen

Appreciate your help,

Try adding an “s” to the end of the “http” in you API url of http://quotes.rest/qod.json?category=inspire

If you check your browser’s console (Ctrl+Shft+I in Chrome), you are getting a Mixed Content error message. Codepen is served over https and the API over http. That is a potential security risk, so it is not allowed. Luckily, the API you are using was designed to work over either http or https, so you will be fine.

1 Like

Thanks a lot. Would have never found that myself.