Random Quote Generator

In this example below you will see how to do a Random Quote Generator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mtphil, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mtphil ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random Quote Generator</title>
  
  
  
  
  
</head>

<body>

  <html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.css" />

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://platform.twitter.com/widgets.js"></script>
</head>
<body>
  <script>
$(document).ready(function() {
  generateQuote();
  quoteTweet = {
    quote: "",
    person: "",
    total: ""};
  $("#getquote").on("click", generateQuote);
})

function generateQuote(){
$.ajax({
type:"POST",
url: "https://api.forismatic.com/api/1.0/",
crossDomain: true,
data: {
  method: "getQuote",
  format: "jsonp",
  lang: "en"
},
dataType: "jsonp",
 jsonpCallback: "readQuote",
  success: readQuote(response) {

    $('#quotationtext').text(response.quoteText);
    $('#quotationauthor').text(response.quoteAuthor);
    quoteTweet.quote = response.quoteText;
    quoteTweet.person = response.quoteAuthor;
    $("#tweetthis").attr("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent('"' + quoteTweet.quote + '" ' + '- ' + quoteTweet.person));
};
})
  }
  </script>
<div class="container-fluid">
	<br /> <br /> <br /> <div class="row">
		<div class="col-md-12">
			<h3>
				Random Quote Generator
			</h3>
			<blockquote id="quotation">
				<p id="quotationtext">
				Quote Placeholder
      </p> <small id="quotationauthor">Author placeholder</small>
			</blockquote>
			<p class="text-justified">
				Use the button below to generate a random quote - click it again to refresh and get a new one. Or click on the Twitter icon to tweet the quote.
			</p>
<div >
      <button type="button" class="btn btn-primary" id="getquote">
				Generate Quote !
			</button>
      <br /><br /><a id="tweetthis" class="btn btn-social-icon btn-twitter" target="_blank">
  <span class="fa fa-twitter"></span></a><p>
</div>
<div class="text-center">
  <small>All quotes from the <a target="_blank" href="https://forismatic.com/en/api/"> forismatic api</a> / page coded and written by <a target="_blank" href="https://github.com/mtphil">Matthew Phillips</a></small>
</div>
		</div>
	</div>
</div>
</body>
</html>
  
  

</body>

</html>

Comments