CODEWITHSUNDEEP
javascripthtml
Link
Link

Reputation: 91

Share a quote to Twitter

I'm trying to make an anime quote generator. Currently making a button that should share the quote from the generator to Twitter. However when pressing the button it doesn't share the qoute to Twitter.

Help appreciated how to solve it.

const api = "https://animechan.vercel.app/api/random";
const anime = document.getElementById("anime");
const quote = document.getElementById("quote");
const character = document.getElementById("character");
const btn = document.getElementById("btn");
document.getElementById("twitter")
btn.addEventListener("click", getQuote);
twitter.addEventListener("click", tweetQuote);


function getQuote() {
  fetch(api)
    .then((res) => res.json())
    .then((data) => {
      anime.innerHTML = `"${data.anime}"`;
      quote.innerHTML = `"${data.quote}"`;
      character.innerHTML = `- ${data.character}`;
      btn.classList.remove("loading");
      btn.innerText = "New Quote";
    });
}
function tweetQuote() {
  window.open("https://twitter.com/intent/tweet?text="+$('data.quote')).text();
}
<title>Anime Quote Generator 💬</title>
</head>

<body>
  <div class="container">
    <div class="quote-box">

      <h2 id="anime">Anime</h2>
      <br>
      <p id="quote">"Quote goes here..."</p>
      <small id="character">- Character</small>
    </div>
    <button id="btn">New Quote</button> 
    
    <br>
    <button id="twitter">TWEET</button> 
  </div>

    <script src="javascript.js"></script>
</body>
</html>

Upvotes: 0

Views: 142

Answers (1)

Peter B
Peter B

Reputation: 24247

I see three issues:

  • A misplaced closing bracket, it should go after .text() instead of before it.
  • An incorrect jQuery selector, it should be $('#quote') instead of $('data.quote'). The data object only exists inside the fetch...then handler function, also jQuery is built to look for DOM objects, it does not look for or use variables in your code.
  • URL parameters need to be URL-encoded, or else the recipient may receive incomplete data and/or garbage data.

Improved code:

function tweetQuote() {
  window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent($('#quote').text()));
}

You can try it in the below code snippet (except I used console.log because window.open does not work in a snippet, you can copy the URL to a new browser window and then it should work).

const api = "https://animechan.vercel.app/api/random";
const anime = document.getElementById("anime");
const quote = document.getElementById("quote");
const character = document.getElementById("character");
const btn = document.getElementById("btn");

document.getElementById("twitter")
btn.addEventListener("click", getQuote);
twitter.addEventListener("click", tweetQuote);

function getQuote() {
  fetch(api)
    .then((res) => res.json())
    .then((data) => {
      anime.innerHTML = `"${data.anime}"`;
      quote.innerHTML = `"${data.quote}"`;
      character.innerHTML = `- ${data.character}`;
      btn.classList.remove("loading");
      btn.innerText = "New Quote";
    });
}

function tweetQuote() {
  console.log("https://twitter.com/intent/tweet?text=" + encodeURIComponent($('#quote').text()));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Anime Quote Generator 💬</title>
</head>

<body>
  <div class="container">
    <div class="quote-box">

      <h2 id="anime">Anime</h2>
      <br>
      <p id="quote">"Quote goes here..."</p>
      <small id="character">- Character</small>
    </div>
    <button id="btn">New Quote</button> 
    
    <br>
    <button id="twitter">TWEET</button> 
  </div>

    <script src="javascript.js"></script>
</body>
</html>

Upvotes: 1

Related Questions