Skip to content

Instantly share code, notes, and snippets.

@n8finch
Created December 13, 2015 11:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save n8finch/7b268b605767460c896f to your computer and use it in GitHub Desktop.
Save n8finch/7b268b605767460c896f to your computer and use it in GitHub Desktop.
Random Quote-to-Tweet Machine
<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>
$(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);*/
});
});
});
<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>
/*
* 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;
}
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment