A Pen by Vishnu Madhusoodanan.

index.html

<div id="wrapper">
  <h2>
      <span id="one">You're</span>
      <span id="two">just </span>
      <span id="three">a...</span>
  </h2>
  <a id="generate">GENERATE INSULT</a>
</div>

Insult-Generator.markdown

Insult Generator

It insults you.

Insults from: http://www.mandatory.com/2013/07/09/the-ultimate-insult-creator/

A Pen by Vishnu Madhusoodanan on CodePen.

License.

script.js

var first = ["LAZY ", "STUPID ", "INSECURE ", "IDIOTIC ", "SLIMY ", "SLUTTY ", "SMELLY ", "POMPOUS ", "COMMUNIST ", "DICKNOSE ", "PIE-EATING ", "RACIST ", "ELITIST ", "WHITE-TRASH ", "DRUG-LOVING ", "BUTTERFACE ", "TONE DEAF ", "UGLY ", "CREEPY "];

var second = ["DOUCHE ", "ASS ", "TURD ", "RECTUM ", "BUTT ", "COCK ", "SHIT ", "CROTCH ", "BITCH ", "TURD ", "PRICK ", "SLUT ", "TAINT ", "FUCK ", "DICK ", "BONER ", "SHART ", "NUT ", "SPHINCTER "];

var third = ["PILOT", "CANOE", "CAPTAIN", "PIRATE", "HAMMER", "KNOB", "BOX", "JOCKEY", "NAZI", "WAFFLE", "GOBLIN", "BLOSSOM", "BISCUIT", "CLOWN", "SOCKET", "MONSTER", "HOUND", "DRAGON", "BALLOON"];

var one = 0;
var two = 0;
var three = 0;

$( "#generate" ).on( "click", function() {
    //three random integers from 0 to 19
    one = getRandomInt(0,19);
    two = getRandomInt(0,19);
    three = getRandomInt(0,19);
    
    $('#one').text(first[one]);
    $('#two').text(second[two]);
    $('#three').text(third[three]);
});

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

style.css

body {
  
  background: url(http://vishnumadhusoodanan.github.io/assets/assets/images/insult-generator/background_mini.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  height: 500px;
}
h2 {
    color: #2c2c2c;
    font-family: 'Lobster', cursive;
  font-size: 3em;
    text-align: center;
    padding-bottom: 50px;
  text-transform: lowercase;
}

a {
    display: block;
    margin: auto;
    max-width: 250px;
    width: 90%;
    cursor: pointer;
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 1.1em;
    text-transform: capitalize;
    background: #8AB839;
    padding: .7em;
    border-radius: 6px;
    text-align: center;
    border-bottom: 3px solid;
    border-color: #6B8F2C;
    
}
#wrapper {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}