Random Quote Generator works locally, not in codepen

1

Hi,

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

test.html:

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

test.js:

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() {
	getQuote()	
});

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

Appreciate your help,
Erlend

2

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
3

Thanks a lot. Would have never found that myself.