css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body onload="createPoem()">

<h1>A Hundred Thousand Billion Poems</h1>
<h2>By Raymond Queneau</h2>

<p id="id"></p>
<p id="poem"></p>
  
<button onclick="createPoem()">New poem</button>
            
          
!
            
              /* use system fonts, as seen here: https://css-tricks.com/snippets/css/system-font-stack/ */
body {
   font: 16px/1.2 BlinkMacSystemFont, -apple-system, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
  line-height: 2em;
  margin: 5vw;
}
#id {
  color:#888888;
}

button {
  color: white;
  background: #5CC9F5;
  border: none;
  border-radius: 5px;
  padding: 0.5em;
}

button:hover {
  background: #4AF2A1;
}

button:active {
  background: #B0F566;
}
            
          
!
            
              function startAgain() {
    location.reload();
}
var lines = [["Don Pedro from his shirt has washed the fleas","The wild horse champs the Parthenon's top frieze","At snuff no Cornish sailorman would sneeze","At five precisely out went La Marquise","From playboy Chance the nymph no longer flees","He bent right down to pick up his valise","When one with t'other straightaway agrees","Prose took the minstrel's verse without a squeeze","The acid tongue with gourmet's expertise","The marble tomb gapes wide with jangling keys"],["The bull's horns ought to dry it like a bone","Since Elgin left his nostrils in the stone","His nasal ecstasy beats best Cologne","For tea cucumber sandwiches a scone","Through snobbish growing round her hemline zone","That hordes of crooks felt they 'd more right to own","The answer is they could be twins full-grown","His exaltation shocked both youth and crone","Licks round carved marble chops on snails full-blown","When masons clutch the breath we hold on loan"],["Old corned-beefs rusty armour spreads disease","The Turks said just take anything you please","Upon his old oak chest he cuts his cheese","Her native chauffeur waited in the breeze","His toga rumpled high above his knees","He bent right down and well what did he seize","Replies like this the dumbstruck brain may tease","The understanding critic firstly sees","The showman gargles fire and sword with ease","Forms shadowy with indecision wheeze"],["That suede ferments is not at all well known","And loudly sang off-key without a tone","With cherry-pips his cottage floor is sown","Which neither time nor tide can long postpone","One gathers rosebuds or grows old alone","The thumb- and finger-prints of Al Capone","Normal one aims to be and share the throne","'Ere meanings new to ancient tribes are thrown","While sharks to let's say potted shrimps are prone","And empty cages show life bird has flown"],["To one sweet hbur of bliss my memory dings","O Parthenon you hold the charger's strings","The Frisian Isles my friends are cherished things","How it surprised us pale grey underlings","Old Galileo's Pisan offerings","Oh how oh how he hates such pilferings","And yet 'twas he the beggar Fate just flings","They both are right not untamed mutterings","The roundabout eats profits made on swings","It's one of many horrid happenings"],["Signalling gauchos very rarely shave","The North Wind Bites into his architrave","Whose ocean still-born herrings madly brave","When flame a form to wrath ancestral gave","Were pots graffiti'd over by a slave","Filching the lolly country thrift helped save","Rejecting ermine to become a knave","That metred rhyme alone can souls enslave","Nought can the mouse's timid nibbling stave","With sombre thoughts they grimly line the nave"],["An icicle of frozen marrow pings","Th'outrageous Thames a troubled arrow slings","Such merchandise a melancholy brings","A darling baron pockets precious Mings","The leaning linguist cameramaniac sings","He's gone to London how the echo rings","The fertile mother changeling drops like kings","They both are right not unformed smatterings","In salads all chew grubs before they've wings","Proud death quite il-le-gi-ti-mate-ly stings"],["As sleeping-bags the silent landscape pave","To break a rule Britannia's might might waive","For burning bushes never fish forgave","Till firemen come with hose-piped tidal wave","Etruscan words which Greece and Rome engrave","Through homestead hillside woodland rock and cave","In purest cradles tha's how they behave","That every verbal shock aims to deprave","The nicest kids for strickiest toffees crave","Victorious worms grind all into the grave"],["Staunch pilgrims longest journeys can't depress","Platonic Greece was not so talentless","When dried the terrapin can naught express","The fasting fakir doesn't smell the less","Emboggled minds may puff and blow and guess","The peasant's skirts on rainy days she'd tress","The genealogist with field and fess","Poetic licence needs no strain or stress","The wolf devours both sheep and shepherdess","It's no good rich men crying Heaven Bless"],["What things we did we went the whole darned hog","A piercing wit would sprightliest horses flog","Shallots and sharks ' fins face the smould'ring log","In Indian summers Englishmen drink grog","With gravity at gravity's great cog","And starve the snivelling baby like a dog","With quill white-collared through his life will jog","One tongue will do to keep the verse agog","A bird-brain banquet melts bold Mistress Mog","Or grinning like a pale-faced golliwog"],["And played their mountain croquet jungle chess","Socrates watched his hemlock effervesce","While homeward thirsts to each quenched glass say yes","The colonel's still escutcheoned in undress","On wheels the tourist follows his hostess","Watching manure and compost coalesce","To prove mamma an adult with a tress","From cool Parnassus down to wild Loch Ness","The country land just thrives on farmyard mess","Poor Yorick comes to bury not address"],["Southern baroque's seductive dialogue","Their sculptors did our best our hulks they clog","Lobsters for sale must be our apologue","No need to cart such treasures from the fog","With breaking voice across the Alps they slog","One misses cricket hearth and croaking frog","But I can understand you Brother Gog","Bard I adore your endless monologue","Whiskey will always wake an Irish bog","We'll suffocate before the epilogue"],["Suits lisping Spanish tongues for whom say some","With marble souvemrs then fill a slum","On fish-slab whale nor seal has never swum","The Taj Mahal has trinkets spice and gum","Do bank clerks rule their abacus by thumb?","Where no one bothered how one warmed one's bum","And let you off from your opinions glum","Ventriloquists be blowed you strike me dumb","Though bretzels take the dols from board-room drum","Poor reader smile before your lips go numb"],["The bell tolls fee-less fi-less fo-less fum","For Europe's glory while Fate's harpies strum","They're kings we're mammal-cousins hi ho ","And lessors' dates have all too short a sum","In cognac brandy is Bacardi rum?","Yet from the City's pie pulled not one plum","A wise loaf always knows its humblest crumb","Soliloquies predict great things old chum","Fried grilled black pudding's still the world 's best yum","The best of all things to an end must come"]];
function createPoem(){
  var poem = '';
var id = 'Version ';
var id = 'Poem #';
for (i = 0; i < lines.length; i++) {
  num = Math.floor(Math.random()*10)
  thisline = lines[i][num];
  poem += thisline + '<br>';
    num += 1; // because most people think numbers start at 1
    if (num < 10) num = "0" + num;
    id += num;
    if (i < lines.length-1) id+= '';
}
document.getElementById("poem").innerHTML = poem;
document.getElementById("id").innerHTML = id;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console