<div class="container">
  <header>
<h1>B<span>o</span>wie Ipsum</h1>
<h2>To be played at <a href="https://open.spotify.com/user/mariemosley/playlist/1qOCkCX6jNzBZAE1YwbTtK">maximum volume</a></h2>
  </header>
<form class="settings">
  <label>How many paragraphs? <input id="graphcount" type="number" min="1" inputmode="numeric" pattern="[0-9]*"></input> </label>
<label>Minimum Paragraph Length: <input id="minlength" type="number" min="1" inputmode="numeric" pattern="[0-9]*"></input> sentences</label>
<label>Maximum Paragraph Length: <input id="maxlength" type="number" min="1" inputmode="numeric" pattern="[0-9]*"></input> sentences</label>
<label>Include HTML Paragraph Tags<input id="ptags" type="checkbox" name="ptags" value="" id=""></input></label>
<button>Get Some Bowie</button>
</form>
<div class="paragraphs">
</div>
</div> <!--container-->
$lightblack:  rgb(65, 61, 61);
$boltred: #DA4849;
$boltblue: #63759B;
$Oswald: 'Oswald', sans-serif;

* { box-sizing: border-box; }

body {
  background:  white url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/redbluelightning.svg) no-repeat left center fixed; 
  background-size: contain;
  height: 100%;
  @media all and (max-width: 1100px) {
   background: white;
  }
}


.container {
  height: 100%;
}

header {
  float: right;
  padding-right: 1em;
  @media all and (max-width: 1100px) {
    padding: 0;
    text-align: center;
    float: none;
  }
}

h1 {
  color: $boltred;
  font-family: 'Monoton', sans-serif;
  font-size: 4.5em;
  font-weight: 400;
  @media all and (max-width: 1100px) {
    padding: 0;
    text-align: center;
  }
  span {
    display: inline-block;
    text-shadow: -1px 1px 1px black,
                  -2px 1px 0 black;
    color: black;
    animation: rotation 5s infinite linear;
  }
}

@keyframes rotation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}



h2 { 
  font-family: $Oswald;
  text-transform: uppercase;
  a {
    color: black;
  }
}

.settings {
  padding-top: 1em;
  font-family: $Oswald;
  color: $lightblack;
  text-align: center;
  clear: both;
  margin-bottom: 1em;
}

label {
  font-size: 1.5em;
  display: block;
  line-height: 2.5;
  
  @media all and (max-width: 500px) {
    font-size: 1em;
  }
}

label span {
  color: $boltred;
  font-size: .8em;
}

input {
    font-size: 1em;
    max-width: 2.5em;
    border: 3px inset $boltblue;
   @media all and (max-width: 500px) {
     font-size: .9em;
   }
}

input[type=checkbox] {
  margin-left: .5em;
}

button {
  color: white;
  font-size: 1.3em;
  background-color: darken($boltblue, 20%);
  border: 1px $boltblue outset;
  padding: 1em;
  border-radius: 15px;
  box-shadow: 1px 1px 1px gainsboro;
  font-family: $Oswald;
  text-shadow: 1px 1px 1px black;
  &:hover {
    background-color: $boltblue;
  }
  @media all and (max-width: 500px) {
    font-size: 1em;
    padding: .5em;
  }
}

.paragraphs {
  display: none;
  padding: 1em 0 2em 0;
  width: 40%;
  margin-left: 30%;
  font-family: $Oswald;
  color: $lightblack;
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1.5;
  @media all and (max-width: 1100px) {
    width: 60%;
    margin: 0 auto;
     background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/redblue-lighter.svg) no-repeat center center;
    background-size: contain;
  }
  @media all and (max-width: 600px) {
    font-size: 1.2em;
    width: 90%;
    margin: 0 auto;
  }
}

.generated { margin-bottom: .5em; }
View Compiled
$(document).ready(function() {
    var randomize = function() {
        return 0.5 - Math.random();
    };

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

    var lyrics = [
        "I wave to the policemen, but they don't wave back. ",
        "They don't dig anything. ",
        "I've got more friends than I've had hot dinners. ",
        "I'm floating in a most peculiar way. ",
        "Tell my wife I love her very much. ",
        "I care for no one else but you. ",
        "He makes you laugh, he brings you out in style. ",
        "He treats you well and makes you up real fine. ",
        "I saw the multitude of faces, honest, rich and clean. ",
        "I kissed a lot of people that day. ",
        "The sun machine is coming down, and we're gonna have a party. ",
        "So I said 'So long', and I waved 'Bye-bye'. ",
        "The far side of town, where the thin men stalk the streets while the sane stay underground. ",
        "We must have died alone, a long long time ago. ",
        "Strange games they would play then. ",
        "No death for the perfect men. ",
        "Life rolls into one for them. ",
        "Strange, mad celebration. ",
        "So softly a supergod cries. ",
        "I watch the ripples change their size, but never leave the stream. ",
        "Strange fascination, fascinating me. ",
        "Put another log on the fire for me, I've made some breakfast and coffee. ",
        "Don't kid yourself they belong to you, they're the start of a coming race. ",
        "Look at those cavemen go. ",
        "If you stay you won't be sorry. ",
        "We believe in you. ",
        "Don't pick fights with the bullies or the cads. ",
        "It's War-hol, actually. ",
        "He'll think about paint and he'll think about glue, what a jolly boring thing to do. ",
        "A couple of songs from your old scrapbook could send her home again. ",
        "If she says she can do it, then she can do it, she don't make false claims. ",
        "I never thought I'd need so many people. ",
        "I kiss you, you're beautiful, I want you to walk. ",
        "I'm an alligator. ",
        "I'm a space invader. ",
        "Freak out! ",
        "Far out! ",
        "Hey, that's far out so you heard him too! ",
        "Don't tell your papa or he'll get us locked up in fright! ",
        "Lady Stardust sang his songs of darkness and disgrace. ",
        "He was awful nice &mdash; really quite out of sight. ",
        "If you think we're gonna make it, you better hang on to yourself. ",
        "You're too old to lose it, too young to choose it. ",
        "Don't let the sun blast your shadow. ",
        "Oh no love, you're not alone. ",
        "He talks like a jerk but he could eat you with a fork and spoon. ",
        "The girl on the phone wouldn't leave me alone. ",
        "His name was always Buddy, and he'd shrug and ask to stay. ",
        "He laughed at accidental sirens that broke the evening gloom. ",
        "I found my teacher crouching in his overalls. ",
        "Breaking up is hard, but keeping dark is hateful. ",
        "As they pulled you out of the oxygen tent, you asked for the latest party. ",
        "Come out of the garden, baby, you'll catch your death in the fog. ",
        "If you want it, boys, get it here. ",
        "I'm glad that you're older than me. ",
        "Beware the savage jaw of 1984. ",
        "Do you remember, the bills you have to pay? ",
        "What you like is in the limo. ",
        "Is it any wonder I reject you first? ",
        "The return of the Thin White Duke. ",
        "Throwing darts in lovers' eyes. ",
        "Have you sought fortune evasive and shy? ",
        "Don't let me hear you say life's taking you nowhere, angel. ",
        "Last night they loved you, opening doors and pulling some strings. ",
        "Never look back, walk tall, act fine. ",
        "In this age of grand illusion, you walked into my life out of my dreams. ",
        "Listen. ",
        "You're such a wonderful person &mdash; but you got problems. ",
        "Don't you wonder sometimes, 'bout sound and vision? ",
        "Pale blinds drawn all day. ",
        "We're lovers, and that is a fact. ",
        "Yes we're lovers, and that is that. ",
        "Oh we can beat them, for ever and ever. ",
        "Dignity is valuable, but our lives are valuable too. ",
        "We're learning to live with somebody's depression. ",
        "It's a very modern world, but nobody's perfect. ",
        "It's a moving world, but that's no reason to shoot some of those missiles. ",
        "Sometimes I feel the need to move on; so I pack a bag and move on. ",
        "Somewhere, someone's calling me when the chips are down. ",
        "Wake up in the wrong town, boy you really get around. ",
        "She asked for my love and I gave her a dangerous mind. ",
        "Oh no, don't say it's true. ",
        "I'm happy, hope you're happy too. ",
        "Sordid details following. ",
        "I've never done good things. ",
        "I've never done bad things. ",
        "I never did anything out of the blue. ",
        "It's the terror of knowing what this world is about &mdash; watching some good friends screaming, \"Let me out!\". ",
        "Insanity laughs under pressure we're cracking. ",
        "Turn to the left! ",
        "Turn to the right! ",
        "See these eyes so green? ",
        "I can stare for a thousand years. ",
        "They're travelling the holy land opening telegrams. ",
        "I would not challenge a giant. ",
        "You were a talented child. ",
        "I'm afraid of Americans. ",
        "I'm afraid of the world. ",
        "I'm afraid I can't help it. ",
        "Sue, the clinic called; the x-ray's fine. ",
        "Look up here, I'm in heaven. "
    ];

    $('form').on('submit', function(e) {
        e.preventDefault();
        $('.paragraphs').empty().show();
        var graphs = parseInt($('#graphcount').val());
        var minlength = parseInt($('#minlength').val());
        var maxlength = parseInt($('#maxlength').val());
      
        if (isNaN(graphs)) {
          graphs = 3;
        }
        
        if (isNaN(minlength)) {
            minlength = 2;
        }

        if (isNaN(maxlength)) {
            maxlength = 6;
        }


        if (maxlength < minlength) {
            alert('maxlength must be more than the minimum length');
            return false;
        }

        for (var i = 0; i < graphs; i++) {
            $('.paragraphs').append('<p class="generated"></p>');
        }

        $('.generated').each(function() {
            lyrics.sort(randomize);
            var sentenceCount = randomNumber(minlength, maxlength);
            for (var x = 0; x < sentenceCount; x++) {
                $(this).append(lyrics[x]);   
            }

        });


        if ($('#ptags').is(':checked')) {
            $('.generated').prepend('&lt;p>').append('&lt;/p>');
        }

    });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js