Quote Generator

index.html

<h1 class="text-center">Quote</h1>
<p class="quote text-center">This is supposed to be a randomly generated quote.</p>
<p class="author text-center">- Author</p>
<button class="center-block"><b>New Quote</b></button>

<script><link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700italic' rel='stylesheet' type='text/css'></script>

Quote Generator.markdown

Quote Generator

Uses forismatic's API to generate quotes.

A Pen by Grant Park on CodePen.

License.

script.js

$(document).ready(function() {
  setQuote();
  $("button").on("click", function() {
    setQuote();
  });
});

function setQuote() {
  return $.ajax({
    url: 'http://api.forismatic.com/api/1.0/', 
    type: 'GET', 
    data: {
      method: 'getQuote',
      format: 'jsonp',
      lang: 'en',
      jsonp: 'callback'
    },
    dataType: 'jsonp'
  });
}

function callback(response) {
  $('.quote').empty();
  $('.quote').text(response.quoteText);
  $('.author').text('- ' + (response.quoteAuthor === ''? 'Anonymous': response.quoteAuthor));
}

scripts

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

style.css

body {
  background-color: orange;
}

h1 {
  border: 3px white solid;
  border-radius: 10px;
  font-family: 'Droid Serif', serif;
  font-style: italic;
  width: 150px;
  margin: 0 auto;
  margin-top: 15%;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: red;
  color: white;
}
.quote {
  position: relative;
  background-color: tomato;
  border-radius: 10px;
  color: white;
  font-style: italic;
  width: 300px;
  border: 3px white solid;
  margin: 0 auto;
  margin-bottom: -7px;
  padding: 15px 15px 15px 15px;
}
.author {
  border-radius: 10px;
  background-color: red;
  width: 250px;
  border: 3px solid white;
  margin: 0 auto;
  color: white;
  font-style: italic;
  padding-top: 5px;
  padding-bottom: 5px;
}
button {
  margin-top: 20px;
  background-color: red;
  width: 100px;
  height: 100px;
  outline: none;
  border: 1px white solid;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  box-shadow: 3px 3px 15px gray;
}

button:hover {
  font-size: 16px;
  box-shadow: 3px 3px 50px gray;
}

button:active {
  border: 1px solid white;
  box-shadow: 3px 3px 15px gray;
}

styles

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