Random Quote Generator (#FCC, working share button)

index.html

<div class="main">
  <blockquote>
    <p id="quote"></p>
      <small><cite id="author"></cite></small>
   </blockquote>

   <div class="text-center">
    <a type="button" id="refresh" class="btn btn-default">
      More wisdom</a>
    </div>
    <br />
    <i type="button" onclick="tweetQuote()" class="fa fa-twitter fa-4x"aria-hidden="true" id="twitter-share">
      </i>
 
    


 

random-quote-generator-fcc-working-share-button.markdown

Random Quote Generator (#FCC, working share button)

FreeCodeAcademy challange, build a random quote machine. It uses API to get quotes and features a fully working twitter share button!

A Pen by Raffaele Spataro on CodePen.

License.

script.js

function randomQuote() {
    $.ajax({
      url: "https://api.forismatic.com/api/1.0/",
      jsonp: "jsonp",
      dataType: "jsonp",
      data: {
        method: "getQuote",
        lang: "en",
        format: "jsonp"
      },//data
      success: function(a) {
       $('#quote').html(a.quoteText);
       $('#author').html(a.quoteAuthor);
      }
    });
  };
 randomQuote();
///
 var textQuote = $("#quote").html();
 $("a").attr("data-text", textQuote);
 $(document).ready(function() {
 $('#refresh').click(function() {
  randomQuote();
  });
});
///(All credits for this snippet to @ksjazzguitar https://forum.freecodecamp.org/u/ksjazzguitar)
function tweetQuote() { 
  var url = "https://twitter.com/intent/tweet";
  var text= "\"" + document.getElementById("quote").textContent + "\" " + document.getElementById("author").textContent;
  var hashtags = "";

  window.open(url + "?text=" + text + ";hashtags=" + hashtags, "width=500,heigth=300");
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/9204c5f991.js"></script>

style.css

body {
   font-family: 'Gloria Hallelujah', cursive;
}

.main {
    text-align: center;
    margin: 2.5em;
    padding: 3.5em;
  }
  
blockquote {
    border-left: none;
    border-style: dotted solid double dashed;
    border-color: grey;
}

#twitter-share {
  cursor: pointer;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />