Help with Quote Generator Javascript

1

Trying to finish the quote generator with vanilla Javascript to get a better understanding of what the code is doing. Currently trying to implement Javascript that pulls from the Forismatic API when the button is pressed and changes the text to the quoteText property but I’m getting no response from the button no matter what I do. Is there anything obvious that I’m missing?

2

You miss a pair of parenthesis: onclick="function()"

3

Thanks! Added the parenthesis, added alerts to the if/else statements for testing. Keep getting the “else” option and the API shouldn’t be down. Do you see any issues with how the API is being called?

4

Will have a look at it, in a minute. I suppose the console will show an error when the request is made?

5

Added pop up alerts to the if/else statements instead. The function should be running so when you click the button you should be getting a Pass/Fail popup.

6

Hey Jk,

Inspect the browsers console. Not the FCC console. The browser will give you more information around error handling.

You’re hitting an error due to Cross Origin Policy, “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://s.codepen.io’ is therefore not allowed access.”

You either need to send header information or send it via JSONP, which is what I did for this challenge.

7

It seems like vanilla js handles JSONP in a rather strange way (if you are used to jQuery).

8

OK I see the CORS error. That gives me something to work with, thanks for the help both of you.

9

The vanilla js way of handling JSONP is making a new script tag:

function getData(data){
    console.log(data);
}

var script = document.createElement('script');
script.src = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=getData&random='+Math.random();

document.getElementsByTagName('head')[0].appendChild(script);
script.parentNode.removeChild(script);

setInterval(function(){
  var script = document.createElement('script');
  script.src = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=getData&random='+Math.random();

  document.getElementsByTagName('head')[0].appendChild(script);
  script.parentNode.removeChild(script);
}, 2000);

This gets a quote from the server every 2 seconds. The part before the setInterval is what you need for a single requeset.

10

BenGitter, based on the console your code is successfully grabbing data off the API. I’m still pretty new to this, can you walk me through briefly on how I’d access the data being pulled by the ‘script’ variable? Thanks for the assist.

11

Hey, I forked your code and changed it a bit: http://codepen.io/benjaminvanzwienen/pen/bBxZdz

As you can see you can acces the quote and author by using data.data.quoteText and data.quoteAuthor. Basically data is just an object with keys. So if you console.log(data) you can see how the acces the parts, remembering that the whole object (data) gets passed in as parameter to the function.

If you haven’t gone through the basic JS object challenges yet, I would recommend doing that, or going through them again.

Maybe this helps: https://cameronspear.com/blog/exactly-what-is-jsonp/

12

Ah gotcha. I didn’t recognize that ‘data’ could be accessed as an object. Thanks a bunch for your help, you’ve saved me a major headache.