Uses forismatic's API to generate quotes.
A Pen by Grant Park on CodePen.
<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> |
Uses forismatic's API to generate quotes.
A Pen by Grant Park on CodePen.
$(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)); | |
} | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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; | |
} |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |