quoteChallenge

index.html

<div class="container">
  <div class="row text-center">
    <h2><i class="fa fa-rocket" aria-hidden="true"></i> Futurama Quote Machine</h2>
  </div>
  <div class="row text-center">
    <div class="col-xs-12 well well-lg message">
      The message will go here
    </div>
  </div>
  <div class="row text-center">
    <div class="col-xs-12">
      <button id="getMessage" class="btn btn-default">
          Get Quote
      </button>
      <span class="twitter-share-button">
          <button class="btn btn-default">
            <i class="fa fa-twitter" aria-hidden="true"></i>
 Share
          </button>
      </span>
    </div>
  </div>
</div>

quoteChallenge.markdown

quoteChallenge

A Pen by Ryan on CodePen.

License.

script.js

var quotes = [{
  name: "professor",
  quote: "Good news everyone!",
  color: "grey"
}, {
  name: "zoidberg",
  quote: "Hooray!",
  color: "blue"
}, {
  name: "Bender",
  quote: "Lets face it, comedy’s a dead art form. Now tragedy! That’s funny.",
  color: "red"
}, {
  name: "Amy",
  quote: "You’ve gone from crazy like a fox to crazy like Fox News.",
  color: "pink"
}, {
  name: "Hermes",
  quote: "With a warning label this big, you know they gotta be fun!",
  color: "green"
}, {
  name: "Fry",
  quote: "All this prolonged exposure to radiation is making me thirsty.",
  color: "orange"
}]

$(document).ready(function() {
  function getRandomIntInclusive(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  $("#getMessage").on("click", function() {
    var qInt = getRandomIntInclusive(0, quotes.length - 1);
    var futQuote = "";
    var shareButton = "";
    var shareUrl = "";

    futQuote += "<blockquote>";
    futQuote += "<p>" + quotes[qInt].quote + "</p>";
    futQuote += "<footer>" + quotes[qInt].name + "</footer>";
    futQuote += "</blockquote>";

    shareUrl += '<a class="twitter-share-button" target="_blank" href="https://twitter.com/intent/tweet?text=' + encodeURI(quotes[qInt].quote) + '">';
    
    shareButton += shareUrl;
    shareButton += '<button class="btn btn-default">';
    shareButton += '<i class="fa fa-twitter" aria-hidden="true"></i> Share';
    shareButton += '</button>';
    shareButton += '</a>';

    $(".message").html(futQuote);
    $("body").css("background-color", quotes[qInt].color);
    $(".twitter-share-button").html(shareButton);
  });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

styles

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

revision 2: adds blockquote and footer elements

revision 4: adds twitter button