Random Quote Generator

index.html

<main>
  <div class="container">
    <div class="page-header">
      <h1>Random Quote Generator<small> Using Forismatic API</small</h1>
    </div>
    <div class="well">
      <blockquote>
        <p id="quote">
        </p>
        <footer id="author">
        </footer>
      </blockquote>
      <div id="twitter-button"></div>
    </div>
    <button id="new-quote-btn" class="btn btn-primary btn-lg">New Quote</button>
  </div>
</main>
    

QuoteGenerator.markdown

Quote Generator

A Pen by Odysseas Samaras on CodePen.

License.

script.js

$(document).ready(function() {
  getQuote();
  $("#new-quote-btn").click(getQuote);
  twttr.widgets.load();
});

function getQuote() {
  $.ajax({
    type: "POST",
    crossDomain: true,
    url: "http://api.forismatic.com/api/1.0/",
    data: {
      method: "getQuote",
      format: "jsonp",
      lang: "en"
    },
    dataType: "jsonp",
    jsonp: "jsonp",
    jsonpCallback: "parseQuote"
  });
}

function parseQuote(response) {
  $('#quote').text(response.quoteText);
  $('#author').text(response.quoteAuthor);
  var text = "'" + response.quoteText + "' - " + response.quoteAuthor;
  $('#twitter-button').empty();
  twttr.widgets.createShareButton(
    'http://codepen.io/odysseas/full/JYjZMm/',
    document.getElementById('twitter-button'), {
      text: text,
    }
  );
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

It's an awesome little code! Could you just explain why the value "jsonp" for json property ? that is

jsonp : "jsonp"

Does the site refer to this as the parameter for the "?callback=xyz" ? where in, instead of "callback", you have provided "jsonp"

Because, now, when I check the API in the forismatic site, it doesn't say much. It shows quotes instead, in the jsonp api page.