Random Quote Chanllenge

index.html

<div class="container">
<div class="row">
  <div class="col-xs-12">
    <h1 id="title">Random Quote Machine</h1>
  </div>
</div>
</div>

<div class="container">
<div class="row" id="intro">
  <div class="col-xs-12">
    <p id="welcome">Sometimes, everyone needs a little inspiration, so here is a random quote of the day for you to do with what you like.</p>
  </div>
</div>
</div>


<div class="container-fluid">
  <div class="row" id="buttons">
    <div class="col-xs-6 center-block"><button type="button" class="btn btn-default" id="random-quote">
      <span class="glyphicon glyphicon-random"></span> Quote</button></div>
    <div class="col-xs-6 center-block"><button type="button" class="btn btn-default" id="tweet">
      <span class="glyphicon glyphicon-share"></span> <a class="twitter-share-button popup twitter" href="https://twitter.com/intent/tweet" data-text="test">
Tweet</a></button></div>
  </div>
</div>






<div class="container">
<div class="row" id="full-quote">

  <div class="col-xs-10">
    <blockquote class="blockquote-reverse" id="quote">Click for random quote!</blockquote>
    <div id="author"></div>
  </div>

  
</div>
</div>

Random Quote Chanllenge.markdown

Random Quote Chanllenge

This is my first codepen challenge on freeCodeCamp

A Pen by Sean Campbell on CodePen.

License.

script.js

$(document).ready(function() {
  $('.popup').click(function(event) {
    var text = $('#quote').text() + " -- " + $('#author').text();
    var hashtags = "Quote";
    var width  = 575,
        height = 400,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href + "?text=" + text + "&hashtags=" + hashtags,
        opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;
    
    window.open(url, 'twitter', opts);
 
    return false;
  });
  
  var quotes = [
    ["Strive not to be a success, but rather to be of value.", "Albert Einstein"],
    ["Two roads diverged in a wood, and I — I took the one less traveled by, And that has made all the difference.", "Robert Frost"],
    ["You miss 100% of the shots you don’t take.", "Wayne Gretzky"],
    ["The most difficult thing is the decision to act, the rest is merely tenacity.", "Amelia Earhart"],
    ["Every strike brings me closer to the next home run.", "Babe Ruth"],
    ["Life isn’t about getting and having, it’s about giving and being.", "Kevin Kruse"],
    ["Life is what happens to you while you’re busy making other plans.", "John Lennon"],
    ["Life is 10% what happens to me and 90% of how I react to it.", "Charles Swindoll"],
    ["The mind is everything, what you think you become.", "Buddha"],
    ["Eighty percent of success is showing up.", "Woody Allen"],
    ["Your time is limited, so don't waste it living someone else's life.", "Steve Jobs"],
    ["Every child is an artist. The problem is how to remian an artist once he grows up.", "Pablo Picasso"],
    ["Be yourself; everyone else is already taken.", "Oscar Wilde"],
  ];
  
  
  $('#random-quote').click(function() {
    var index = Math.floor(Math.random() * quotes.length);
    $('#quote').text(quotes[index][0]);
    $('#author').text(quotes[index][1]);
  })
})

scripts

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

style.css

@import url(http://fonts.googleapis.com/css?family=Griffy);

body {
  background-color: #999966;
}

#title {
  font-family: Griffy, cursive, sans-serif;
  font-size: 4em;
  text-shadow: 4px 4px 2px #663300;
  color: #000500;
  text-align: center;
  padding: 10px;
}

#intro {
  margin-top: 50px;
}

#buttons {
  margin-top: 25px;
}
#welcome {
  border: inset #996600;
  border-radius: 5px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 1.1em;
  margin-right: 100px;
  margin-left: 100px;
  text-align: center;
  margin-bottm: 50px
}

#full-quote {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 40px;
  border: hidden;
  border-radius: 50px;
  background-color: #FFFF99;
}

#quote {
  padding-left: 3em;
}

#author {
  float: right;
  font-style: oblique;
  
}

#random-quote {
  float: right;
  background: #004d05;
  background-image: linear-gradient(to 60deg, #004d05, #abeb57);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  text-shadow: 4px 3px 2px #5c4d01;
  font-family: Georgia;
  color: #ffb940;
  font-size: 1.25em;
  padding: 12px;
  text-decoration: none;
}

.twitter {
  color: #ffb940;
}

.twitter:visited {
  color: #ffb940;
  text-decoration: none;
}

.twitter:hover, #random-quote:hover, #tweet:hover{
  color: #FF6600;
  font-weight: bold;
  text-decoration: none;
}

#tweet {
  float: left;
  background: #004d05;
  background-image: linear-gradient(to 240deg, #004d05, #abeb57);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  text-shadow: 4px 3px 2px #5c4d01;
  font-family: Georgia;
  color: #ffb940;
  font-size: 1.25em;
  padding: 12px;
  text-decoration: none;
}

styles

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