n8finch
12/13/2015 - 11:06 AM

Random Quote-to-Tweet Machine

Random Quote-to-Tweet Machine

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* 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-color: #333;
}
body {
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
          box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}


/*
 * Header
 */
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}

.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,.75);
  border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #a9a9a9;
  border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }
  .masthead-nav {
    float: right;
  }
}


/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: bold;
}

#quote-text {
  margin: 20px px;
  font-size: 35px;
  
}

/*
 * Footer
 */

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
}


/*
 * Affix and center
 */

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
$(document).ready(function() { 
  var quoteArr = [];
  var index;

  
  $("#quote-button").click(function() {
    $("#quote-text").addClass("animated shake");
    
    $("#quote-text").html(function() {
        quoteArr = ["Is that some kind of Eastern sh*t?",  "Careful, man, there's a beverage here!", "Nobody. F***s. With the Jesus!", "I am not Mr. Lebowski. YOU'RE Mr. Lebowski. I'm the Dude. So that's what you call me.", "A wiser man than myself once said, 'Sometimes you eat the bar, sometimes, the bar eats you.", "You want a toe? I can get you a toe, believe me. There are ways, Dude. You don't wanna know about it, believe me.", "I don't roll on Shabbos!", "I had buddies who died face-down in the muck so you and I could enjoy this family restaurant!", "F*** it, Dude. Let’s go bowling.", "That rug really tied the room together, did it not?" ]
        var index = Math.floor(Math.random() * 10); 
        return quoteArr[index];
    });
  });
  
  $("#tweet-button").click(function() {
    var quotedText = $("#quote-text").html();    
    $('a#tweet-button').each(function() {
      var value = $(this).attr('href');
      var newValue = $(this).attr('href', value.replace('#/','http://twitter.com/home/?status=' + '"' + quotedText + '" via @n8finch'));
      /*alert(quotedText);*/
    });
  
});
  
});


<body>

<div class="site-wrapper">

  <div class="site-wrapper-inner">

    <div class="cover-container">

      <div class="masthead clearfix">
        <div class="inner">
          <h3 class="masthead-brand">Labowski Quotes</h3>
          <nav>
            <ul class="nav masthead-nav">
              <li class="active"><a href="https://www.github.com/n8finch" target="_blank">by n8finch <i class="fa fa-github"></i></a></li>
            </ul>
          </nav>
        </div>
      </div>

      <div class="inner cover">
        <h2 class="cover-heading" id="quote-generator">Click for a quote, man.</h2>
        <p class="lead">
          <a href="#" class="btn btn-lg btn-success" id="quote-button">"Another caucasian, Gary" <i class="fa fa-glass"></i></a>
        </p><em>
        <p class="lead" id="quote-text">The Dude abides...</p></em
        <p>
          Liked that kind of Eastern stuff?
        </p>
        <p class="lead">
          <a href="#/" target="_blank" class="btn btn-lg  btn-primary" id="tweet-button">Click to tweet <i class="fa fa-twitter"></i></a>
        </p>
        
      </div>

      <div class="mastfoot">
        <div class="inner">
          <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
        </div>
      </div>

    </div>

  </div>

</div>

<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>

Random Quote-to-Tweet Machine

Quote should shake and appear after the button is clicked, like an 8 ball.

Click to tweet!

Quotes from the movie, gathered from: http://www.today.com/id/44080281/ns/today-today_entertainment/t/dude-abides-quotable-lebowski/#.Vmy9DRp95E4

A Pen by Nate Finch on CodePen.

License.