<body>
<div class = "container">
<div class = "row">
<div class = "col-md-12">
<h1>Random Quote Machine</h1>
<h3>Get one now!!!</h3>
<hr>
</div>
</div>
<div class = "row">
<div class = "col-md-8 col-md-offset-2">
<div class = "quote-box">
<p id = "quote"></p>
<p id = "author"></p>
</div>
<ul class = "list-inline">
<li><a href="#" class="btn btn-default btn-lg get-quote"><i class="fa fa-quote-left fa-fw"></i>Get Quote!</a></li>
<li><a href="#" class="btn btn-default btn-lg share-quote"><i class="fa fa-twitter fa-fw"></i>Share Quote!</a></li>
</ul>
</div>
</div>
</body>
body {
/*background-image: url(http://i792.photobucket.com/albums/yy202/dainty-ish/patterns/jtvqz8.gif);
background-repeat: repeat; */
background: #353334;
}
body,
h1,
h3,
p {
font-family: Helvetica, Arial, sans-serif;
color: #e9e3e6;
}
.container{
text-align: center;
padding-top: 50px;
}
hr{
width: 600px;
border: 1px solid black;
}
.quote-box{
border: 1px dashed black;
border-radius:15px;
padding: 10px;
margin-bottom: 15px;
}
$(document).ready(function () {
var quote;
var author;
function getNewQuote() {
$.ajax({
url: "http://api.forismatic.com/api/1.0/",
jsonp: "jsonp",
dataType: "jsonp",
data: {
method: "getQuote",
lang: "en",
format: "jsonp"
},
//or just add an url - url: "http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en",
success: function (response) {
quote = response.quoteText;
author = response.quoteAuthor;
$("#quote").text(quote);
if (author) {
$("#author").text("said by " + author);
} else {
$("#author").text("-unknown");
}
}
});
}
getNewQuote();
$('.get-quote').on('click', function (event) {
event.preventDefault();
getNewQuote();
});
$(".share-quote").on("click", function (event) {
event.preventDefault();
window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(quote + "--" + author));
});
});