Tweet Quote Functionality - Help Needed

1

Here’s my code.

I just need the tweet button to work now. Or is it okay right now? The test passes, at least, even though the quote isn’t automatically sent when I click the button.

2

So you wanna make it to where when you click on the button you add href = "https://twitter.com/intent/tweet?text=" + quote + author to the <a> tag.

This is the code I used if you want it spoiled:

$(document).ready(function(){$('#tweet-quote').click(function() {
  $(this).attr("href", 'https://twitter.com/intent/tweet?text=' + quote + author);
})});
3

Thanks.

So why did it not work when I tried to do this:

<a id="tweet-quote" href=`https://twitter.com/intent/tweet?text=${quote}&{author}`>Tweet</a>

Template string literals won’t work?

How do I add an event listener to that anchor element in plain JavaScript with React?

Edit: Okay, I at least got the tests to pass by writing the render function like this:

render() {
    const quote = this.state.quote;
    const author = this.state.author;
    const url = `https://twitter.com/intent/tweet?text=${quote}${author}`;
    return (
      <div>
        <p id="text">{quote}</p>
        <p id="author">{author}</p>
        <button onClick={this.generateQuote} id="new-quote">New Quote</button>
        <a id="tweet-quote" href={url}>Tweet</a>
      </div>
    );
  }

But clicking on the “Quote” button gives an error saying, “twitter.com refused to connect”. Apparently I need to use window.open somewhere for this. But I don’t get where.

4

Finally got it to work.

render() code:

render() {
    const quote = this.state.quote;
    const author = this.state.author;
    const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`${quote}${author}`)}`;
    return (
      <div>
        <p id="text">{quote}</p>
        <p id="author">{author}</p>
        <button onClick={this.generateQuote} id="new-quote">New Quote</button>
        <a id="tweet-quote" href={url} target="_blank">Tweet</a>
      </div>
    );
  }

Now the window to tweet the quote opens in a new tab. This should be fine.

1 Like
5