Skip to content

Instantly share code, notes, and snippets.

@jeffehobbs

jeffehobbs/index.html

Last active January 4, 2016 16:49
Show Gist options
  • Save jeffehobbs/8650213 to your computer and use it in GitHub Desktop.
Save jeffehobbs/8650213 to your computer and use it in GitHub Desktop.
Download ZIP
Jersey Scandal Generator v. 5.0
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scandal Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family: 'prelo-slab';
src: url('font/preloslab-extrabold-webfont.eot');
src: url('font/preloslab-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/preloslab-extrabold-webfont.woff') format('woff'),
url('font/preloslab-extrabold-webfont.ttf') format('truetype'),
url('font/preloslab-extrabold-webfont.svg#PreloSlabExtraBoldExtraBold') format('svg');
font-weight: normal;
font-style: normal;
}
body {
padding: 20px;
}
p {
font-family: Georgia, serif;
font-size: 16px;
line-height: 24px;
color: #363636;
}
.container {
max-width: 620px;
margin: 0px auto;
}
.advance-button {
display: block;
font-family: prelo-slab, sans-serif;
font-size: 22px;
margin: 0 auto;
text-align: center;
color: white;
background: #4f90cc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5091cd), to(#437eb5));
background-image: -webkit-linear-gradient(top, #5091cd, #437eb5);
background-image: -moz-linear-gradient(top, #5091cd, #437eb5);
background-image: -o-linear-gradient(top, #5091cd, #437eb5);
background-image: -ms-linear-gradient(top, #5091cd, #437eb5);
background-image: linear-gradient(top, #5091cd, #437eb5);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5091cd', EndColorStr='#437eb5');
padding: 6px 8px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
outline: none;
}
.advance-button-pressed {
background-image: -webkit-gradient(linear, left top, left bottom, from(#437eb5), to(#5091cd));
background-image: -webkit-linear-gradient(top, #437eb5, #5091cd);
background-image: -moz-linear-gradient(top, #437eb5, #5091cd);
background-image: -o-linear-gradient(top, #437eb5, #5091cd);
background-image: -ms-linear-gradient(top, #437eb5, #5091cd);
background-image: linear-gradient(top, #5091cd, #437eb5);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#437eb5', EndColorStr='#5091cd');
}
.credits {
font-style: italic;
text-align: right;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 17px;
font-style: normal;
color: #666;
}
.credits a {
color: #305CB6;
font-weight: 700;
text-decoration: none;
}
.credits a:hover {
text-decoration: underline;
}
.madlib {
color: white;
transition: color 0.2s;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
}
.bold {
font-weight: bold;
}
.fadein {
color: black;
}
.img-responsive {
max-width: 100%;
height: auto
}
</style>
</head>
<body>
<div class="container">
<img src="http://spsullivanmedia.com/multimedia/scandal.jpg" class="img-responsive" />
<p>
<span id="rand-town" class="madlib bold">TRENTON</span> &mdash; A New Jersey
<span id="rand-position" class="madlib">politician</span>
<span id="rand-consequence" class="madlib">has melted down</span> after
<span id="rand-authority" class="madlib">authorities</span> discovered they
<span id="rand-scandal" class="madlib">closed down a bridge</span> for
<span id="rand-reason" class="madlib">political retribution</span>.
</p>
<p>
"<span id="rand-quote" class="madlib">It is what it is</span>" the
<span id="rand-modifier" class="madlib">disgraced</span>
<span id="rand-position-two" class="madlib">politician</span> said at
<span id="rand-event" class="madlib">press conference</span> today.
</p>
<button id="refreshButton" class="advance-button" onclick="refreshScandals();">refresh scandals</button>
<p class="credits">
Scandal <span id="num-scandal" class="bold">0</span> out of <span id="possible-scandals" class="bold">0</span>.
Created by <a href="http://twitter.com/spsullivan/" target="_blank">S.P. Sullivan</a> and <a href="http://twitter.com/jeffehobbs" target="_blank">Jeff Hobbs</a>.
</p>
</div>
<script>
function refreshScandals () {
//push the button
document.getElementById('refreshButton').classList.add('advance-button-pressed');
//reset text
document.getElementById('rand-town').classList.remove('fadein');
document.getElementById('rand-position').classList.remove('fadein');
document.getElementById('rand-consequence').classList.remove('fadein');
document.getElementById('rand-authority').classList.remove('fadein');
document.getElementById('rand-scandal').classList.remove('fadein');
document.getElementById('rand-reason').classList.remove('fadein');
document.getElementById('rand-quote').classList.remove('fadein');
document.getElementById('rand-modifier').classList.remove('fadein');
document.getElementById('rand-position-two').classList.remove('fadein');
document.getElementById('rand-event').classList.remove('fadein');
setTimeout(function(){
//unpush the button
document.getElementById('refreshButton').classList.remove('advance-button-pressed');
//declare arrays
var towns = ['TRENTON', 'JERSEY CITY', 'NEWARK', 'HOBOKEN', 'FORT LEE', 'CAMDEN', 'HACKENSACK'];
var positions = ['state senator', 'Congressman', 'school board member', 'senator', 'utilities authority commissioner', 'dog catcher', 'governor', 'county executive', 'freeholder', 'mayor', 'assistant commissioner', 'assemblyman',];
var consequences = ['has melted down', 'cannot stop weeping', 'has resigned in disgrace', 'will not seek reelection', 'has been brought up on charges', 'has seen their Presidential aspirations go up in flames', 'is down in the polls', 'is facing a recall', 'has been endorsed by Donald Trump', 'is in hot water'];
var authorities = ['authorities', 'detectives', 'police', 'federal investigators', 'an Assembly investigatory committee', 'an independent inquiry', 'an opposition researcher', 'a <em>Star-Ledger</em> investigation'];
var scandals = ['closed down lanes on the George Washington Bridge', 'conspired to cancel the Superbowl', 'helped out fugitive Ecuadorian bankers', 'drained the Meadowlands', 'burned down the Pine Barrens', 'faked their own death in a scuba accident', 'packed the Port Authority with political operatives', 'sold kidneys on the black market', 'promised lucrative casino deals to fake sheikhs who were actually undercover cops', 'given waste-hauling contracts to the mob', 'arranged a real estate deal to build low-income housing on a Superfund site', 'taken cash bribes from insurance brokerage and roofing companies', 'sold city land on the cheap to a girlfriend', 'taken hundreds of thousands of dollars in bribes from a towing company', 'used a government-owned gas generator', 'extorted a doctor for cash bribes and Viagra prescriptions', 'run a for-profit golf tournament and pocketed the proceeds', 'given their secret crush a key Homeland Security job', 'kidnapped Bon Jovi', 'stolen Cory Booker&rsquo;s snow shovel', 'direct messaged a stripper on Twitter'];
var reasons = ['political retribution', 'a payola scheme', 'campaign contributions', 'an episode of &ldquo;The Sopranos&rdquo;', 'a mafia-run bookmaking operation', 'a relative&rsquo;s shell company', 'Bruce Springsteen tickets', 'the fun of it', 'a no-show job', 'a trip to Florida'];
var quotes = ['It is what it is,', 'I am not a crook,', 'Mistakes were made,', 'I would like to apologize to my family and to the people of New Jersey,', 'When did we become such an unforgiving people?', 'And for this, I ask the forgiveness and the grace of my wife,', 'And I would have gotten away with it, too, if it weren&rsquo;t for you meddling reporters!', 'I am embarrassed and humiliated by the conduct of some of the people on my team,', 'In America you&rsquo;re innocent until proven guilty. And I am innocent!', 'I feel great sadness for what has transpired,', 'If I made a mistake, it was not of malice or intent,', 'Look, things could be worse. We could be Florida,'];
var modifiers = ['disgraced', 'humiliated', 'sweat-soaked', 'second-term', 'formerly popular', 'Democratic', 'Republican'];
var events = ['a press conference', 'a local Chuck E. Cheese', 'an arraignment', 'a sentencing hearing', 'a campaign breakfast'];
var refreshes = ['Only in Jersey!', 'So what?', 'I heard that on the news!', 'Who cares?', 'I read that on NJ.com!'];
//compute how many possible scandals
var possibleScandals = towns.length * positions.length * consequences.length * authorities.length * scandals.length * reasons.length * quotes.length * modifiers.length * events.length;
var numScandal = Math.floor((Math.random() * possibleScandals)+1);
document.getElementById('num-scandal').innerHTML = "#" + numberWithCommas(numScandal);
document.getElementById('possible-scandals').innerHTML = numberWithCommas(possibleScandals);
//shuffle through contents of each array, picking one entry per array
var randTown = towns[Math.floor(Math.random() * towns.length)];
var randPosition = positions[Math.floor(Math.random() * positions.length)];
var randConsequence = consequences[Math.floor(Math.random() * consequences.length)];
var randAuthority = authorities[Math.floor(Math.random() * authorities.length)];
var randScandal = scandals[Math.floor(Math.random() * scandals.length)];
var randReason = reasons[Math.floor(Math.random() * reasons.length)];
var randQuote = quotes[Math.floor(Math.random() * quotes.length)];
var randModifier = modifiers[Math.floor(Math.random() * modifiers.length)];
var randEvent = events[Math.floor(Math.random() * events.length)];
var randRefresh = refreshes[Math.floor(Math.random() * refreshes.length)];
//place the random entry into the appropriate place in the HTML
document.getElementById('rand-town').innerHTML = randTown;
document.getElementById('rand-position').innerHTML = randPosition;
document.getElementById('rand-position-two').innerHTML = randPosition;
document.getElementById('rand-consequence').innerHTML = randConsequence;
document.getElementById('rand-authority').innerHTML = randAuthority;
document.getElementById('rand-scandal').innerHTML = randScandal;
document.getElementById('rand-reason').innerHTML = randReason;
document.getElementById('rand-quote').innerHTML = randQuote;
document.getElementById('rand-modifier').innerHTML = randModifier;
document.getElementById('rand-event').innerHTML = randEvent;
document.getElementById('refreshButton').innerHTML = randRefresh;
//trigger animations
setTimeout(function(){
document.getElementById('rand-town').classList.add('fadein');
}, 200);
setTimeout(function(){
document.getElementById('rand-position').classList.add('fadein');
}, 400);
setTimeout(function(){
document.getElementById('rand-consequence').classList.add('fadein');
}, 600);
setTimeout(function(){
document.getElementById('rand-authority').classList.add('fadein');
}, 800);
setTimeout(function(){
document.getElementById('rand-scandal').classList.add('fadein');
}, 1000);
setTimeout(function(){
document.getElementById('rand-reason').classList.add('fadein');
}, 1200);
setTimeout(function(){
document.getElementById('rand-quote').classList.add('fadein');
}, 1400);
setTimeout(function(){
document.getElementById('rand-modifier').classList.add('fadein');
}, 1600);
setTimeout(function(){
document.getElementById('rand-position-two').classList.add('fadein');
}, 1800);
setTimeout(function(){
document.getElementById('rand-event').classList.add('fadein');
}, 2000);
}, 200);
};
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
refreshScandals();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment