Random Quotes Generator

index.html

<div class = "text-center">
  <h1 class="quote text-center text-primary"></h1>
  <h4 class="author text-muted"></h4>
  <button class="quoteButton btn btn-lg btn-default" type="button">Random Quote</button>
</div>

random-quotes-generator.markdown

Random Quotes Generator

Consumes the api from www.mashape.com/andruxnet/random-famous-quotes to generate random quotes

A Pen by Rem Lampa on CodePen.

License.

script.js

function generateQuote() {
    $.ajax({
      url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
      type: 'POST', // The HTTP Method
      data: {}, // Additional parameters here
      datatype: 'json',
      success: function(data) {
        quote = JSON.parse(data);
        $('.quote').html('"' + quote.quote + '"');
        $('.author').html('-= ' + quote.author + ' =-');
      },
      error: function(err) {
        console.log(err);
      },
      beforeSend: function(xhr) {
        xhr.setRequestHeader("X-Mashape-Authorization", "c3Ylhc7ZXbmshY1lb0rYQRiRmLX9p1sJqiYjsnToJMCxt3XNhP"); // Enter here your Mashape key
      }
    });
  };

$(document).ready(function() {
  var quote;
  
  generateQuote();

  $('.quoteButton').click(function(event) {
    generateQuote();
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.quoteButton {
  margin: 25px 0;
}

h4 {
  padding: 0 10px;
}

div {
  margin: 150px;
}

styles

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