Random Quote Machine - help with tweet button

Code Feedback
1

Please help me figure out why the tweet button of my random quote machine isn’t working :disappointed_relieved::disappointed_relieved::disappointed_relieved: https://codepen.io/MUNACHI/pen/dmvexY?editors=0010

2

your id of tweet button is wrong on the JS code. Correct it, and also there should be only one $(document).ready() function inside which all code should be. You have two there and most code is outside the ready() function which won’t work.

3

Hi there,

First, your button’s name doesn’t match. Change it in your HTML.

id="tweet-quote"

Second, you’re using $(document).ready more than you need. You’re using it inside getQuote() function and also at the end of the script. You need to initialize your data (currentQuote, currentAuthor, random, etc) in your getQuote() function, then call this function inside the $(document).ready at the bottom. Something like this:

function getQuote() {
  //For random selection
  var random = quotes[Math.floor(Math.random() * quotes.length)];
  var currentQuote = random.quote;
  var currentAuthor = "- " + random.author;
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  $(".quote-text").html(currentQuote);
  $(".quote-author").html(currentAuthor);
  $(".quote-area").css("background-color", "randomColor");
  if(inIframe()) {
    $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
  }
}

And then, at the bottom:

$(document).ready(function() {
  getQuote( );
  // and the rest of the code...
}

This way not only the tweet button gets the job done, but also your initial random quote loads, instead of showing the same quote everytime you load the page.

Hope it helps.

Happy coding!

2 Likes
4

Thank you very much, the button is working perfectly but the program still doesn’t load a quote at start.

5

I just reviewed your modified code. You still have things to change.

  1. You’re not invoking getQuote() out of the click listener scope, so the first quote won’t ever load.
$(document).ready(function() {
  // ADD HERE THE CALL TO getQuote();
  $("#new-quote").click(function() {
    getQuote();
  });
  // AND HERE THE CLICK LISTENER FOR THE #tweet-button
});
  1. I suppose you’re making changes, because I don’t see the tweet button anywhere. So you need to put it back there, where I told you in the comments above. Like this:
  $('#tweet-button').on('click', function() {
    if(!inIframe()) {
      openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }
  });
  1. On line 89 you are calling a function it doesn’t exist (twttr.widgets.load();). Delete it and I would also delete from line 73 to 82 ((function(d, s, id) … })(document, “script”, “twitter-wjs”);) as you’re not using it anywhere.

If I didn’t miss anything, it should work fine.

6

Thanks a million times, new quotes now load on launch but i’ve already added the tweet button part and its working fine. Once again thanks a million.