Random quote generator problem in codepen

1

I’ve been trying to figure out where the problem is for a long time now.Got a bit frustated as the code works perfectly fine when I run it locally but doesn’t work on codepen . Can anyone help me with this???
Random Quote generator

2

Take a look at your console.log :

jquery.min.js:2 Mixed Content: The page at 'https://codepen.io/i-sushant/pen/NMoxYW' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en'. This request has been blocked; the content must be served over HTTPS.

Failed to load https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

The simplest fix is to change your api url to this:

https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?

This is a cors / access issue from the codepen origin , you can google more about it or search in this forum , been asked many times

1 Like
3

Are you missing a function to generate a random number? I don’t know how it would function without it.

Your source file only has one Quote…
change your

var url = ‘http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en’;
to
var url = ‘https://codepen.io/mnichols08/pen/ZoVZmy.js’;
That is the quote source file that I got from a gitHub with over 1500 quotes.

I have updated your function to work, assuming you change var url s mentioned above.

function genQuote(){
$.getJSON(url,function(response){
var randomNumber = Math.floor(Math.random() * response.length);
tweet=response[randomNumber].quoteText + ’ - ’ + response[randomNumber].quoteAuthor;
$(“.quote”).append(‘

’+‘ ‘+response[randomNumber].quoteText+’ ’+‘

’);
$(“.author”).append(‘

-’+response[randomNumber].quoteAuthor+‘

’);
});
}

Here is a link to a forked version of your Quote Generator.
https://codepen.io/mnichols08/pen/ZowLvd?editors=0011

Feel free to view mine too if you want to see how I came up with it.

5

Thank you so much .That fixed my problem.

6

2m
Random function wasn’t used here because forismatic API needs a key in the url, when the key is not specified,it generates a random quote on its own. Read more about it here
Thanks for the response :slightly_smiling_face:. Cheers!

7

No worries for the response, happy to help!

Thanks for the tip on the forismatic API. I didn’t find that one yet.