Random Quote Machine - .on(click, function) in JQuery

Hi everyone! I am currently on the project Random Quote Machine. I’m learning JQuery as I go and sometimes I confuse myself…
One of the requirement of this project is that the user can click to tweet out a quote generated randomly by the website. Currently my project works like this: upon clicking the “get quote” button, the quote box with the quote and its author pop up, along with a Twitter icon (from Font Awesome) and a line to prompt people to tweet. I would like to open the tweeting page on clicking the Twitter icon/prompt line but was not sure how to do it despite multiple attempts. I have attached the relevant JS/JQuery code down here and I would very much appreciate your input and help!

function getQuote() {
var sqLength = sourceQuote.length;

  for (var i = 0; i < sqLength; i++) {
    var x = Math.floor(Math.random() * sqLength);
    var newQuote = sourceQuote[x].quote;
    var newAuthor = sourceQuote[x].author;
    $(".quote-box").fadeOut(400, function() {
      $(".author").append("- by " + newAuthor);
      $(".tweet").append('<i class="fa fa-twitter" aria-hidden="true"></i> <b>Tweet this!</b>')
    $(".quote-box").css("border", "2px white solid");
  } // end of for loop


$(document).ready(function() {
  $("button").click(function() {
    $("button").fadeIn(400, function() {
      $("#pText").html("I want another one!");
  $("i").on('click', function() {
    if (!inIframe()) {
      openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + newQuote + '" ' + newAuthor))

this is how i did it

$("#tweet-button").on("click", function(){
window.open("https://twitter.com/intent/tweet?text=" + YourQuoteVar + " -" + AuthorVar);  });

hope this helps, good luck!

Hi Ermin,

Thanks for the suggestion - I think our codes are meant to do similar things, but since on my page the Twitter icon only appears (e.g gets appended to the empty

element) after I click on the “get quote” button, I was not sure how to access the icon using JQuery selector… any idea on that?

Much thanks!

Here is how to do it, click.

1 Like

Oh god, thank you so much! I was doing a bit research on Stack Overflow as well but have not gotten to this post yet.
The project worked after a couple of tries - turns out it was the line with the Iframe check that was causing the problem. Thanks for directing me to that post though, very much appreciated it!


1 Like