Random Quote Machine

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

Displays a random quote from an array of quotes

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Random Quote Machine</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1 class="center fancy phat-border">Random Quote Machine!</h1>
  <div id="quote-output">
    <blockquote id="quoteable">
      <span>Loading...</span>
      <cite>Loading...</cite>
      <div id="tweetit"></div>
    </blockquote>
  </div>
  <button id="action-button" class="fancy">CLICK ME!</button></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://platform.twitter.com/widgets.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bretbelgarde/random-quote-machine-YwPLqJ */
@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
body{
  margin:40px auto;
  max-width:650px;
  line-height:1.6;
  font-size:18px;
  color:#369;
  padding:0 10px;
  background-color:#eee;
}

h1,h2,h3{
  line-height:1.2
}

#quote-output{
  margin:45px 0;
  padding:0.5em 40px;
  max-width: 650px;
  background-color: #DEDEFF;
  border-radius:12px;
  height:200px;
}

blockquote {
  font-family: Georgia, serif;
  font-size: 22px;
  font-style: italic;
  margin 0.25em auto;
  padding: 0.25em 0 0.25em 40px;
  line-height:1.5;
  position: relative;
}

blockquote:before {
  display: block;
  content: "\201C";
  font-size: 3em;
  position: absolute;
  left: -10px; top: -10px;
  color: #258;
}

blockquote cite {
  color: #258;
  font-size:18px;
  display: block;
  margin-top:5px;
  text-align:right;
  font-weight:bold;
}

blockquote cite:before{content: "\2014 \2009"}
.center{text-align:center;}
.fancy{font-family: 'Sigmar One', arial, sans-serif;}
.shadow{text-shadow: 4px 4px 8px black;}
.phat-border{
  border: 8px solid #369; 
  border-radius:16px;
  padding: 1em;
  box-shadow: 4px 4px 8px 1px rgba(0,0,0,0.4)
}

.phat-border > * {
  margin:0; padding:0;
}

#action-button {
  width:100%; 
  padding:10px 0;
  border: 4px solid #369;
  border-radius:8px;
  font-size:1.2em;
  background-color: #369;
  color: #fff;
  cursor: pointer;
}

#tweetit{
  text-align:right;
}

/*Downloaded from https://www.codeseek.co/bretbelgarde/random-quote-machine-YwPLqJ */
var getQuote = function() {
    var quotes = [
        {
            "cite":"Anonymous",
            "text":"The best thing about a boolean is even if you are wrong, you are only off by a bit."
        },
        {
            "cite":"Louis Srygley",
            "text":"Without requirements or design, programming is the art of adding bugs to an empty text file."
        },
        {
            "cite":"Ralph Johnson",
            "text":"Before software can be reusable it first has to be usable."
        },
        {
            "cite":"Anonymous",
            "text":"In order to understand recursion, one must first understand recursion."
        },
        {
            "cite":"Oktal",
            "text":"I think Microsoft named .Net so it wouldn\u2019t show up in a Unix directory listing."
        },
        {
            "cite":"Alan J. Perlis",
            "text":"There are two ways to write error-free programs; only the third one works."
        },
        {
            "cite":"Anonymous",
            "text":"It\u2019s not a bug – it\u2019s an undocumented feature."
        },
        {
            "cite":"Jessica Gaston",
            "text":"One man\u2019s crappy software is another man\u2019s full time job."
        },
        {
            "cite":"Jeff Sickel",
            "text":"Deleted code is debugged code."
        },
        {
            "cite":"Edward V Berard",
            "text":"Walking on water and developing software from a specification are easy if both are frozen. "
        },
        {
            "cite":"Gordon Bell",
            "text":"The cheapest, fastest, and most reliable components are those that aren\u2019t there."
        },
        {
            "cite":"Mosher\u2019s Law of Software Engineering",
            "text":"Don\u2019t worry if it doesn\u2019t work right. If everything did, you\u2019d be out of a job."
        },
        {
            "cite":"Anonymous",
            "text":"VI has 2 modes. One that beeps at you, and another that ruins everything"
        },
        {
            "cite":"Linus Torvalds",
            "text":"Talk is cheap. Show me the code."
        },
        {
            "cite":"Keith Bostic",
            "text":"Perl - The only language that looks the same before and after RSA encryption."
        },
        {
            "cite":"Seymour Cray",
            "text":"The trouble with programmers is that you can never tell what a programmer is doing until it\u2019s too late."
        }
    ];

    return quotes[Math.floor(Math.random() * (quotes.length - 1))]
}
var generateTweet = function(container, quote) {
    // Generate the twitter "tweet" button
    // The first parameter includes a refering url if '' is used as
    // opposed to ' '. This was undesireable because it made several of the quotes
    // too long to tweet without modification.
    twttr.widgets.createShareButton(' ', document.getElementById(container),{text:quote});
}
var replaceQuote = function() {
    // Displays quote on page, deletes and regenerates tweet button.
    var quote = getQuote();
    $("#quoteable span").text(quote.text);
    $("#quoteable cite").text(quote.cite);
    $("#tweetit").html('');
    generateTweet("tweetit", quote.text + ' -' + quote.cite);
}

$(document).ready(function(){
    replaceQuote();
    $("#action-button").click(replaceQuote);
});

Comments