Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


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

  <meta charset="UTF-8">
  <title>Random Quote Machine</title>
  <script type="text/javascript" async src="" src = "quotemachine.js"></script>
  <link rel="stylesheet" href="quotemachine.css" />

  <div class="container-fluid">
    <div class="row">
      <figure class="col-xs-3">
      <figure class="col-xs-6">
        <figure class="well">
          <figure class="quotebox">
            <!--Above is the quotebox figure-->
          <figure class="authorbox">
            <!--Above is the authorbox figure-->
      <figure class="col-xs-3">
    <div class="row">
      <button class="resetbutton col-xs-offset-3">RESET</button>
      <!--Above is the reset button which is clicked to load a random video game quote, author, and background-->
      <a id="tweetbutton" class="col-xs-offset-4" href="#">TWEET THIS QUOTE!</a>



                body {
  margin-top: 20px;
  background-repeat: no-repeat;
  background-size: cover;

/* Quote Machine Box */

.quotebox {
  font-family: 'Ubuntu Mono';
  text-align: left;

.authorbox {
  font-family: 'Ubuntu Mono';
  text-align: right;

/* Quote  Reset & Tweet Buttons */

#tweetbutton {
  color: red;
  font-family: 'Ubuntu Mono';
  font-weight: bold;
  border-style: none;
  background-color: #9E9E9E;
  padding: 5px 15px 5px 15px;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
  -webkit-transition: -webkit-box-shadow .1s ease-in-out;

#tweetbutton:focus {
  outline: none;

#tweetbutton:active {
  -webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);


                //Please do keep in mind this was all made before ES6 was available, or at the very least, before I knew it was available.
// The array that's holding my quotes, or my quote box
// So let's break this down into more readable bits.
var quotes = [{
  //Above, I'm defining a variable, quotes, which is a stored array.
    author: "-Duke Nukem: Manhatten Project",
  //Above is one part of this array.  This is 'author', which is really just the source of my quote
    quote: "Come on out, Morphix. There's just two ways this can end, and in both of them, you die!",
  //Above here, the actual quote from the game labeled in author
    boxart: ""
  //Above here, a background image related to the game from author that I chose.
  //So, inside each {} are 3 items, but they are all together one part of this array.  You would access them via javascript with quotes[number].author(or quote, or boxart).  Remember when picking a particular item in an array, arrays are zero indexed, so if you were to use javascript to do var srowboxart = quotes[1].quote, then srowboxart's value would turn into "Tell my wife I had another wife".  This is because inside of quotes, [1] is the second item in the array, so it's the Saints Row items, and accessing that index, .quote is quote inside of that item.
  }, {
    author: "-Saints Row IV",
    quote: "Tell my wife I had another wife.",
    boxart: ""
  }, {
    author: "-Dead Space 3",
    quote: "Good men mean well.  We just don't always end up doing well.",
    boxart: ""
  }, {
    author: "-Portal",
    quote: "Okay. The test is over now. You win. Go back to the recovery annex. For your cake.",
    boxart: ""
  }, {
    author: "-Max Payne - Part 2",
    quote: "Niagara? as in you cry a lot?",
  }, {
    author: "-The Elder Scrolls V: Skyrim",
    quote: "I used to be an adventurer like you, then I took an arrow in the knee.",
  }, {
    author: "-The Legend Of Zelda",
    quote: "It's dangerous to go alone!  Take this.",
    boxart: ""
  }, {
    author: "-Pac-Man",
    quote: "Wakka wakka wakka!",
    boxart: ""
  }, {
    author: "-Starcraft",
    quote: "Nuclear launch detected.",
    boxart: ""
  }, {
    author: "-Mortal Kombat",
    quote: "Get over here!",
    boxart: ""
  }, {
    author: "-Killer Instinct",
    quote: "C-c-c-combo breaker.",
    boxart: ""
// ***End of Quote Box Array***

// This will take a random quote from the array above and put both the quote and the author in their respective html classes as well as make the
// page background match the boxart in the index.
function randomQuote() {
  //This here is pretty self explanatary.  It's me naming a function randomQuote
  var randomIndex = Math.floor(Math.random() * quotes.length);
  //This function defines a variable, randomIndex.  Let's break this down.
  //Math.random() * quotes.length
  //Above here takes Math.random, which produces a random integer between 0 and 1, but never will be 1.  That number is then multiplied by quotes.length, which is how many items quotes has in it, which in this case is 11.  The important thing to note here is that when you're doing an array.length, .length is actually the number of items because it counts each item as 1 item, and is unaffected by zero indexing.  The Math.floor() function takes the number produced by Math.random() * quotes.length and rounds it down to the next whole number.  So bacially randomIndex could be anything from 0 to 10.99999999999.....
  //Now that you know that, the variable randomIndex stores a number, randomly from 0 to 10, in this case.
  var quotation = quotes[randomIndex];
  //So now, the value of quotation is stored as a random item inside of the quotes variable.  If randomIndex's value is generated as 10, and arrays being zero indexed, quotes[10] is the 11th item. quotes[9] is the 10th item, quotes[8] is the 9th item, so on and so forth.
  //This here is where we run into jquery.  Basically $('.quotebox').html is saying set the html inside of the quotebox class figure I've commented in the html
  //(quotation.quote) is picking a random item inside of the quotes array and accessing it's quote property. I.E., if quotation accesses the 0 index item, the first array item, it's .quote property is quote: "Come on out, Morphix. There's just two ways this can end, and in both of them, you die!"
  //So you can see that the above line of code sets the html of the quotebox figure to a random quote attribute inside of the array quotes.
  //The above here is the same exact concept and execution above instead it sets the html inside of the authorbox class figure I will label in the html instead of the quotebox.
  $('body').css({'background-image': 'url(' + quotation.boxart + ')'});
  //Once more, like above, this does the same thing and has the same functionality, but sets the html of the body of the document to have the background image in the boxart attribute in the quote item.
  $('#tweetbutton').attr('href', ''+ quotation.quote + ' ' +'target', '_blank');
  //I know what this does, but I did have to google this and copy and pasted the twitter link.  Basically, it's just setting the attribute of the ID'd tweetbutton so that the link related to the button is twitter that will request a tweet and open up a blank tweet box for you to tweet out onto twitter and auto fill your quote array's .quote and .author attributes.  This will open up in a new window from the _blank attribute.  Again, I had to look this up, but basically this is the breakdown...
  //$('#tweetbutton').attr****This is setting what the tweetbutton does when clicked******('href', ''+ quotation.quote + ' ' +******This is the link the button will use, that link something that opens a text box for an empty tweet and fills it with the attributes quotation pulls up******.attr('target', '_blank')****This opens up the new window******;

//So the way this works is that above, each line of code in that function runs all at once, read from top to bottom.
//You might be asking, like I was, when I was doing this, "Okay, Joe.  I kind ofget this, but how does everything match each time and how does it repopulate and match right?"
//The answer is easier once you realize what's happening above.  "reverse engineer this" by looking from bottom to top.  Find what each piece is doing and what each piece is doing until you get to the top of the randomQuote() function.
//randomIndex creates a random number from 0 to 11.  This is done once for the whole function.
//quotation creates a specified array object randomly from randomIndex once and is statuc upon function run.
//Since everything happens at once, each load of this whole thing is static with the randomly generated number.

//**** The end of the random quote generating function ****

$(document).ready(function() {
  //**** The above line of code makes it to where anything in this block happens upon page load***
  //***This is what makes it to where each page load randomQuote runs and generates one of the random quote items.***
  $('.resetbutton').click(function() {
    //This makes it to where a click function happens each time you click the resetbutton class button I will label in html which runs a function defined inside this block.
    //Above is randomQuote, which runs each time resetbutton is clicked.