Random Quote Machine 2

index.html

<div class="container">
  <h1>Random Quote Generator</h1>  
  
  <section class="quote">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">        
        <div class="quote-copy">
          Click the button to reveal a quote...
        </div>
        <div class="quote-author">
          ... and it's author
        </div>
        <button id="test" class="btn btn-quote" type="submit">
          Quote Please!
        </button>
        <div class="tweet">
        <a href="https://twitter.com/share" class="twitter-share-button"{count} data-via="Dephora">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div>
      </div>
    </div>
  </section> 
  
   

</div><!-- /.container -->

Random Quote Machine 2.markdown

Random Quote Machine 2

A Pen by Matt on CodePen.

License.

script.js

$( document ).ready(function() {

  var quoteGenerator = (function() {
    var quotes = [
      { 
        quote: "The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly. A programmer is ideally an essayist who works with traditional aesthetic and literary forms as well as mathematical concepts, to communicate the way that an algorithm works and to convince a reader that the results will be correct.",
        author: "- Donald Ervin Knuth"
      },
      
      {
        quote: "...if you aren't, at any given time, scandalized by code you wrote five or even three years ago, you're not learning anywhere near enough",
        author: "- Nick Black"
      },
      {
        quote: "I don't know how many of you have ever met Dijkstra, but you probably know that arrogance in computer science is measured in nano-Dijkstras.",
        author: "- Alan Kay"
      },
      {
        quote: "C is quirky, flawed, and an enormous success.",
        author: "- Dennis M. Ritchie"
      },
      {
        quote: "The cost of electrons and photons is getting cheaper all the time!",
        author: "- T. Gilling"
      },
      {
        quote: "What's in your hands I think and hope is intelligence: the ability to see the machine as more than when you were first led up to it that you can make it more.",
        author: "- Alan J. Perlis"
      },
      {
        quote: "Is it possible that software is not like anything else, that it is meant to be discarded: that the whole point is to always see it as a soap bubble?",
        author: "- Alan J. Perlis"
      },
      {
        quote: "The most important property of a program is whether it accomplishes the intention of its user.",
        author: "- C.A.R. Hoare"
      }
      
    ];    
    
    $("#test").click(function() {
      var randNum = Math.floor(Math.random() * quotes.length);
      var randQuote = quotes[randNum].quote
      var randQuoteAuthor = quotes[randNum].author
      $('.quote-copy').text(randQuote);
      $('.quote-author').text(randQuoteAuthor);
    }); 
  
  })(); 
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritence from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  background: -webkit-radial-gradient(circle, #2B404E, #19252E);
}
body {  
  text-align: center;
  text-shadow: 0 5px 5px rgba(0,0,0,.6);
}

.tweet {
  margin-top: 2.5rem;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

h1 {
  color: #18B4DB;
  font-size: 3.5em;
}

.quote-copy {
  color: #D0E4ED;
  font-size: 2.6em;
  margin-bottom: 2rem;  
}

.quote-author {
  color: #64CA92;
  font-size: 2.3em;
  margin-bottom: 3rem;
  text-shadow: 0 5px 5px rgba(0,0,0,.6);
}

.btn {
  background-color: #F25145;
  border: 1px solid #F25145;
  font-size: 1.4em;
  
}
.btn.btn-quote {
  background-color: #F25145;
  border: 1px solid #F25145;
  color: #fff;
  
  font-weight: heavy;
  box-shadow: 0 5px 5px rgba(0,0,0,.6);
  
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />