Stuck with the random quote generator challenge

1

Hi, i am currently working on the random quote generator challenge.
the generator retreives its quotes from an API. Whenever i attempt to share a quote via twitter the next quote is passed onto the function which pastes the quote to the twitter sharing form, instead of that currently being displayed by the generator.
The JSON function is fired whenever the document loads or the “display new quote”- button is clicked.
When the tweet button is being clicked neither the element just mentioned are clicked, nor does the page reload…
Does anyone of you guys know why the sharing function does not pass the displayed quote to the twitter website?

the link to my project: http://codepen.io/Pukii/pen/YNqMdN?editors=0010

Any help is much appreciated!

2

Hi @pukii1

The main problem I can see is that you’re treating asynchronous code as if it’s synchronous.

So, at the beginning of your code you getJSON to fetch the quote, then you specify the function that will get called when someone clicks on '.welcome', however, if someone clicks welcome before the data has been fetched from getJSON, than the quote wont be available in randomQuote and will put whatever it’s current value is (undefined initially) into '.quote'.

  // Sends a request to the server and registers the callback function to fire
  // when the data has been fetched, in this case, assigning the data to variables.
  $.getJSON(url, function(data){
    randomQuote = data.quoteText;
    randomAuthor = data.quoteAuthor;
  });
  
  // Register the callback to the click event on '.welcome'.
  // However, if this is clicked BEFORE the data above is finished loading, 
  // the new quote won't be available to this function.
  $('.welcome').on('click', function(){
  console.log('FRONT SCREEN CLICKED!');
    //PULL UP FRONT SCREEN
  $('.overlap').addClass('pullUp');
    console.log(randomQuote);
    
    //CHECK WETHER AUTHOR PROP EXISTS
    $('.quote').html(randomQuote);
    if(randomAuthor != ""){
      $('.author').html("-" + randomAuthor);  
    }else{
      $('.author').html( randomAuthor);
    }
  });

Ultimately, you can’t rely on randomQuote and randomAuthor having the correct values outside of the getJSON callback because you can’t be sure when the data will be fetched and when the user will click new quote / the welcome menu / share.

Best way to resolve it imo is to move the logic that depends on the quote data into the function callback of getJSON. You could also make a function for that as you use it a couple of times.

As an example if your stuck:

// You could separate this into fetch data and update DOM functions;
// this is for simplicity's' sake.
function fetchDataAndUpdateDOM() {
  var url = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?';

  $.getJSON(url, function(data) {
    var quote = data.quoteText;
    var author = data.quoteAuthor;
    
    $('.quote').html(quote);

    if(author != "") {
      $('.author').html("-" + author );  
    } else {
      $('.author').html(author );
    }

  });
}

I’m not sure what you’re seeing here, when I click the tweet button it opens a new tab with twitter in it, although it displays the wrong quote because of the problems above.

1 Like
3

hi @joesmith100 ,
thank you very much for the advice,
i applied the changes to the code and now the correct quote is being passed on to the twitter page.