Random Quote

index.html

<div class="container">
  <div id="heading">
    <button>Change Quote</button>
    <i class="fa fa-twitter-square"></i>
  </div>
  
  <div id="blockquote">
    <h1><i class="fa fa-quote-left"></i>Quote<i class="fa fa-quote-right"></i></h1>
    <h3>Author</h3>
  </div>
</div>

random-quote.markdown

Random Quote

A Pen by Hoang Vo on CodePen.

License.

script.js

// Put all of the quotes of computer science in an array for storage
var quotes = [{
  quote: "Computers are useless.  They can only give you answers.",
  author: "Pablo Picasso"
}, {
  quote: "Computers are like bikinis. They save people a lot of guesswork.",
  author: "Sam Ewing"
}, {
  quote: "They have computers, and they may have other weapons of mass destruction.",
  author: "Paul Leary"
}, {
  quote: "If the automobile had followed the same development cycle as the computer, a Rolls-Royce would today cost $100, get a million miles per gallon, and explode once a year, killing everyone inside.",
  author: "Robert X. Cringely"
}, {
  quote: "Never trust a computer you can’t throw out a window.",
  author: "Steve Wozniak"
}, {
  quote: "Most software today is very much like an Egyptian pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands of slaves.",
  author: "Alan Kay"
}, {
  quote: "I’ve finally learned what ‘upward compatible’ means.  It means we get to keep all our old mistakes.",
  author: "Dennie van Tassel"
}, {
  quote: "The Internet?  Is that thing still around?",
  author: "Homer Simpson"
}, {
  quote: "The Web is like a dominatrix.  Everywhere I turn, I see little buttons ordering me to Submit.",
  author: "Nytwind"
}, {
  quote: "Come to think of it, there are already a million monkeys on a million typewriters, and Usenet is nothing like Shakespeare.",
  author: "Blair Houghton"
}];
var getQuote;
init();

// Running the program
function init() {
  getQuote = quotes[0].quote + " (" + quotes[0].author + ")";
  // At the beginning, let the screen show the first quote
  $("h1").html("<i class='fa fa-quote-left'></i> " + quotes[0].quote + " <i class='fa fa-quote-right'></i>");
  $("h3").html(quotes[0].author);
  changeQuote();
  tweetQuote();
}

// Change to the new quote everytime we run the event of this function
function changeQuote() {
  $("button").click(function() {
    var randomQuote = Math.floor(Math.random() * quotes.length);
    $("h1").fadeOut(function() {
      $(this).html("<i class='fa fa-quote-left'></i> " + quotes[randomQuote].quote + " <i class='fa fa-quote-right'></i>").fadeIn();
    });

    $("h3").fadeOut(function() {
      $(this).html(quotes[randomQuote].author).fadeIn();
    });
    getQuote = quotes[randomQuote].quote + " (" + quotes[randomQuote].author + ")";
  });
}

function tweetQuote() {
  // Change to the random quote after clicking
  $(".fa-twitter-square").click(function() {
    var tweet = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(getQuote);
    window.open(tweet, '_blank');
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

style.css

body {
  background: #EDE574; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #EDE574 , #E1F5C4); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #EDE574 , #E1F5C4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+,     Opera 12+, Safari 7+ */        
}

#heading {
  background: #32cd32;
  height: 36px;
  font-size: 24px;
}

#heading button {
  border: none;
  background: #32cd32;
  color: white;
  font-size: 18px;
  height: 100%;
}

#heading button:focus, #heading button:hover {
  outline: none;
  background: white;
  font-weight: bold;
  color: #32cd32;
  cursor: pointer;
  transition: all 0.2s;
}

.fa-twitter-square {
  float: right;
  padding: 5px;
  color: white;
}

.fa-twitter-square:hover {
  color: #f3f3f3;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.5s;
}

.container {
  background: white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  width: 400px;
  margin: 150px auto;
}

#blockquote {
  font-family: 'Dancing Script', cursive;
  padding: 10px;
}

#blockquote h3 {
  text-align: right;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700'rel='stylesheet'type='text/css'" rel="stylesheet" />