CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bishal alam
Bishal alam

Reputation: 43

Twitter box is not auto filling with quote

I was working on a project 'quote generator'. Everything works fine except the Twitter button. It's opening a new window with a new tweet box but it is not filling the box with the desired quote in it. I'm a bit confused here. I tried everything. So a little help would be much appreciated. Thank you.

Here's my project: https://codepen.io/buzz_lightyear/pen/BmdzaZ

var quotes = ["The Way Get Started Is To Quit Talking And Begin Doing.", "The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.", "Don't Let Yesterday Take Up Too Much Of Today.", "You Learn More From Failure Than From Success. Don't Let It Stop You. Failure Builds Character.", "It's Not Whether You Get Knocked Down, It's Whether You Get Up.", "If You Are Working On Something That You Really Care About, You Don't Have To Be Pushed. The Vision Pulls You.", "People Who Are Crazy Enough To Think They Can Change The World, Are The Ones Who Do", "Failure Will Never Overtake Me If My Determination To Succeed Is Strong Enough.", "Entrepreneurs Are Great At Dealing With Uncertainty And Also Very Good At Minimizing Risk. That's The Classic Entrepreneur", "We May Encounter Many Defeats But We Must Not Be Defeated", "Knowing Is Not Enough; We Must Apply. Wishing Is Not Enough; We Must Do", "Imagine Your Life Is Perfect In Every Respect; What Would It Look Like?"];

function makeId() {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  $("#quote > h1").html(quotes[randomNumber]);
}

$(document).ready(function() {
  $("#press > button").click(function() {
    $("#quote > i").fadeOut("slow").fadeIn("slow");
    $("#quote > h1").fadeOut("slow", function() {
      makeId();
      $(this).fadeIn("slow");
    });
  });
});
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet">

<div id="header">
  <h1>My Quote Machine</h1>
</div>

<div id="quote">
  <i class="fa fa-quote-left" aria-hidden="true" style="font-size: 15px; bottom: 10px;"></i>
  <h1>I shall not waste my days in trying to prolong them.</h1>
</div>
<div id="press">
  <div id="icon">
    <a href="https://twitter.com/intent/tweet/?text=" target="_blank"><i class="fa fa-twitter fa-2x" id="twitterid" style="color: white"></i></a>
  </div>
  <button class="btn btn-lg">Quote</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript.js" type="text/javascript"></script>

Upvotes: 0

Views: 57

Answers (2)

Michael Wilson
Michael Wilson

Reputation: 1579

You were leaving the text attribute in the tweet intent empty.

You need to supply this initially (as you have the first quote hardcoded in the HTML).

Then in your makeId function dynamically change the text attribute.

https://codepen.io/anon/pen/YExdNY

HTML (I moved the twitterid to the actual link instead of the icon):

<a id="twitterid" href="https://twitter.com/intent/tweet/?text=I shall not waste my days in trying to prolong them." target="_blank">
  <i class="fa fa-twitter fa-2x"  style="color: white"></i>
</a>

JS:

function makeId() {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  $("#quote > h1").html(quotes[randomNumber]);

  // get the twitter intent link
  var twitterid = $("#twitterid");
  // remove existing text attribute with quote
  // change with the newly generated quote
  twitterid.attr("href", twitterid.attr("href").split("text=")[0] + "text=" + 
  quotes[randomNumber]);
}

Edit: This line of code:

twitterid.attr("href", twitterid.attr("href").split("text=")[0] + "text="
+ quotes[randomNumber]);

Gets the href attribute from the twitterid link, splits the href's value by the text attribute, then adds it back again but uses the next quote.

Upvotes: 1

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

The twitter URL you are using needs text added to the end of it

https://twitter.com/intent/tweet/?text=ADD_YOUR_QUOTE_HERE

So you just need to append some text using javascript into the URL when the user clicks on the bird icon.

Upvotes: 0

Related Questions