Issue with Twitter button in Random Quote Generator

JavaScript
1

Hi everyone, I’m working on the Random Quote Generator project. Everything else has been going smoothly, but I’m really having some trouble with the Twitter share button.

So in my codepen’s JS section, I have a snippet from the WikiquotesAPI made by Nate Tyler, then the Twitter button’s code, and then my own code. (The button code and my code are in a document event listener for when the page loads, if that helps.)

This is how the Twitter button is written in my HTML:
<a class="twitter-share-button" href="https://twitter.com/share" data-text="" data-size="large" id="twitter"></a>

In my JS right now, this is how I’m trying to insert the quote into the Tweet:

insertQuote = qt => {
    ...
    twitter.setAttribute("data-text", qt.quote);
};

But then I test the Twitter share button and the text box just shows a link to the codepen.

I’ve also tried to add the quote to the href itself (while also using the encodeURIComponent() function), just like this:

<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=" data-text="" data-size="large" id="twitter"></a>

twitter.setAttribute("href", twitter.getAttribute("href") + encodeURIComponent(qt.quote));

But I just got the same exact result. In both cases, I also looked in the console for any errors, but nothing shows up there. I’m at a loss right now, although I’m thinking that something about the other code (or where I put the document’s event listener and/or the others) is causing the issue. (Like the twitter button doesn’t exist yet when I’m trying to put the quote into its data-text attribute?)

(Also, I need to find a way to make the API pick from random titles - right now, it’s only picking things from Thomas Jefferson because I just set it that way temporarily. :P)

My project:
https://codepen.io/KelbyBaca/pen/BrwZgP

2

You might be overthinking things. Your code seems really complicated for this project.

After getting the quote, I simply updated the anchor tag with the new link. Something like this.

let res = await fetch('wikipediaData')
let json = await res.json()

document.querySelector('#paragraph').innerHTML = json.quote

document.querySelector('#twitterBtn').href = `https://twitter.com/intent/tweet?text=${json.quote}`

I got confused by all the complicated functions and stuff you had in there, so apologies if this wasn’t helpful.

3

Thanks a lot, I really did over-engineer this, and that’s what’s making it so hard to figure out what the problem is to begin with. I’m retrying this project from the ground-up, with a separate codepen. I’ll try what you suggested, too, once I get back to the twitter button part.

1 Like
4

Hey there, I’m happy to say that I successfully finished the challenge! Here’s the link to the final codepen: https://codepen.io/KelbyBaca/pen/RMxGmy

I did try your code above, which didn’t work, sorry to say. I ended up creating a whole function, createButton(), that creates the Twitter button element and sets its attributes to include the quote and its author.

(I also had to switch to using the Quotes on Design API, which made things so much easier.)

1 Like
5

Great, that code looks a lot simpler.

Haha, that’s part of the fun. What good would I be if I just gave your working solutions to everybody? I took your quote project and used my code above in it. I simply updated the anchor tag like I mentioned above, so I removed the twitter stuff you had. Also used forismatic as I’ve used that before. Here is the link: https://codepen.io/isaacabrahamson/full/EEQPgq/

And the code is pretty much identical to what I had above:

async function getQuote() {
  // Use CORS api because codepen doesn't like cross-origin requests
  let API_URL = 'https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en';
  
  let res = await fetch(API_URL);
  let json = await res.json();
  
  document.querySelector('#quoteCtr').innerHTML = `<p>${json.quoteText} - ${json.quoteAuthor}</p>`;
  document.querySelector('.tweet').href = `https://twitter.com/intent/tweet?text=${json.quoteText}`
}