123

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.

            
              <!-- <!DOCTYPE html> -->
<html lang="en">
  <head>
  </head> 
  <body>  
    <header>
      <h1>Tender <span class="hide">Buttons</span>
        <!-- About -->
        <div style="display:none" id="myAbout">
        <div class="about popup"><span class="x" onclick="about_close()">&#215;</span>Gertrude Stein wrote <i>Tender Buttons</i> (1914) in three parts: “Objects,” “Rooms,” and “Food”. Often compared to cubist painters for her bold use of form and abstraction, she intended these short prose poems as “studies in description”.<br><br>These <i>tender</i> buttons randomly generate new texts using Stein's original syntax and vocabulary.<br><br>Read the <a href="https://www.gutenberg.org/files/15396/15396-h/15396-h.htm" target="_blank">full book</a>.</div>
        </div>
        <div class="about" onclick="about_open()"><span id="hide2" title="About">&#9679;</span></div>
      </h1>      
    </header>  
    <!-- Page Content -->
    <div class="group">
      <div class="left">
        <h1 class="subtitle">
<!-- <div><span id="hide3" title="Original Text">&#9679;</span></div> -->Objects         
        </h1>
        <p><button class="generate1" id="b1" onclick="newPoem()"><!---Object---></button></p>
        <p id="poetry-content1"></p>
        <p id="poetry-content1b" class="poemtext"></p>
      </div>
      <div class="center">
        <h1 class="subtitle">Food</h1>
        <p><button class="generate2" id="b2"><!---Food---></button></p>
        <p id="poetry-content2"></p>
        <p id="poetry-content2b" class="poemtext"></p>
      </div>
      <div class="right">
        <h1 class="subtitle">Rooms</h1>
        <p><button class="generate3" id="b3"><!---Rooms---></button></p>
        <p id="poetry-content3"></p>
        <p id="poetry-content3b" class="poemtext"></p>
      </div>  
    </div>
  </body>
</html>
            
          
!
            
              /****** BOX-SIZING / CLEAR FIX ******/
* html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
} */

.group:after {
  content: "";
  display: table;
  clear: both;
}

/****** FONT ******/
@font-face {
    font-family: Cochin;
    src: url(https://github.com/potyt/fonts/blob/master/macfonts/Cochin/Cochin-Bold.ttf);
}

/****** BODY ******/
body {
  margin: 0px;
  margin-right: -.7%;
}

header {
  top: 0;
  width: 100%;
  overflow: hidden;
  border-bottom: 2px solid;
  background-image: linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
}

h1 {
  text-align: center;
  font-family: Cochin, Serif;
  letter-spacing: .15em;
  font-size: 2em;
  text-transform: uppercase;
}

.subtitle {
  font-size: 1em;
  text-transform: uppercase;
}

.group {
  width: 100%;
  margin: 0 auto;
}

.left, .center, .right {
    padding-bottom: 25px;
    z-index: -1;
}

.left {
  float: left;
  width: 33%;
  height: 100vh;
  border-right: 2px solid black;
  padding-top: 1.5em;
  overflow: auto;
}

.center {
  float: left;
  width: calc(33%);
  height: 100vh;
  border: 0px;
  background: white;
  padding-top: 1.5em;
  overflow: auto;
}

.right {
  float: left;
  width: 33%;
  height: 100vh;
  border-left: 2px solid black;
  padding-top: 1.5em;
  overflow: auto;
}

/****** TENDER BUTTON TEXT ******/
p {
  padding: 0 1rem 0 1.5rem;
  font-family: Cochin;
  line-height: 1.225em;
  letter-spacing: .5px;
  text-transform: uppercase;
}

p.poemtext::first-letter { 
    text-transform: uppercase;
}

.poemtext {
  text-transform: none;
}

/****** ABOUT POPUP ******/
.about {
  text-transform: none;
  text-align: center;
  position: absolute;
  right: 10px;
  line-height: 1.5em;
  font-size: .75em;
  top: .9em;
}

.x{
  position:relative;
  top: 3px;
  text-align:left;
  font-size: 40px;
  font-family: Helvetica Neue;
  font-weight: 100;
  padding-right: 5px;
}

.x:hover{
  color: hotpink;
  opacity: .75;
  transition: all 0.8s linear;
  cursor: pointer;
}

.popup{
  text-transform: none;
  text-align: left;
  position: absolute;
  top: 0;
  right: -1px;
  background-color:white;
  border-bottom: 2px solid black; 
  padding: .5em 0 .5em 15px;
  font-size: .6em;
  line-height: 1.225em;
  letter-spacing: .5px;
  height: 3.1em;
  overflow: scroll;
  ::-webkit-scrollbar {
      width: 15px;}
}

a {
  color: inherit;
  text-decoration: underline;
}

/* ABOUT BUTTON */
#hide2 {
  font-size: 1.55em;
}

#hide2:active {
  outline: none;
  border: none;
}

#hide2:focus {outline:0;}

#hide2:hover{
  color: white;
  opacity: .75;
  transition: all 0.8s linear;
  cursor: pointer;
}

/* ORIGINAL TEXT BUTTON */
/* #hide3 {
  font-size: 1.55em;
  position: absolute;
  left: 1em;
  top: 3.85em;
}

#hide3:active {
  outline: none;
  border: none;
}

#hide3:focus {outline:0;}

#hide3:hover{
  color: white;
  opacity: .75;
  transition: all 0.8s linear;
  cursor: pointer;
} */

/****** BUTTON ******/
button {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 2px solid black;
  margin-left: calc(100%/2 - 20px);
  margin-bottom: 10px;
  text-align: center;
  box-sizing: border-box;
  background-color: white;
  transition: 1s;
}

button:active {
  outline: none;
  border: none;
}

button:focus {outline:0;}

button:hover{
  background-color:pink;
  transition: all 0.8s linear;
  cursor: pointer;
}

/****** TABLET AND MOBILE******/

@media screen and (max-width: 480px){
  .left, .center, .right {
    width: 100%;
    height: 15em;
    margin-top: 0;
    border: 0;
    font-size: 2em;
    line-height: 2.4em;
    padding-top: .5em;
  }
  .center {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
  }
  button{
    margin-left: calc(100%/2 - 35px);
  }
  .hide {
    display: none;
  }
}

/****** MOBILE LANDSCAPE MODE ******/

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape){
    .left, .center, .right {
      width: 100%;
      height: 20em;
      margin-top: 0px;
      border: 0;
  }
}
            
          
!
            
              // **************** OBJECTS ****************
const adjectivesObj = ['blind','glass','glazed','Mildred&#x27;s','red','long','blue','frightful','mounted','new','careless','raining','cold','little','between','brown','called','white','supposed','peeled','black','meadowed','black','precise','resolute','wet','placed','high','back','papered','habitual','tyrannical','hollow','red','little','beautiful','crazy','shallow','steady','tall','likely','reckless','fairy-like','regular','liquid','whole','clean','judged','narrow','pink','sold','hot','cool']
const articlesObj = [
  'a',
  'the'
]
const gerundsObj = [
'pointing','resembling','spreading','cleansing','glittering','convincing','spitting','washing','polishing','borrowing','giving','winning','closing','leading','pounding','pressing','calling','meaning'
]
const nounsObj = ['carafe','glass','glitter','substance','cushion','box','piece','coffee','dirt','copper','nothing','method','cloak','stamp','plate','seltzer','bottle','dress','hat','coat','piano','chair','release','purse','cloth','cup','saucer','object','cutlet','water','paper','drawing','water','climate','malachite','petticoat','waist','time','bit','tumbler','fire','handkerchief','rose','feather','little','Pauline','sound','table','shoe','dog','hunter','leaf','shawl','book','pencil','king','touch','jack','muncher','wheel','coke','house','soup','pearl','goat','sky','chest','book','plain','care','cleaner','cultivator','climb','depot','sample','cousin','spectacle','ticket','bobble','round','wedding','build','hat','sizer','leather','size','summer','donkey','monkey','hole','midnight','choice','revision','stand','table','steadiness','candy','jam','cough','feather','noon','moon','window','lace','watermelon','custard','light','virgin','foot-path','collapse','letter','ribbon','curve','dirt','surface']
const prepositionsObj = ['to','through','under','over','between','on','in','above','below']

// **************** OBJECTS GENERATOR ****************
$('.generate1').on('click', function newPoem() {
// RANDOMIZER
  let randomAdjective = Math.floor(Math.random() * (adjectivesObj.length));
  let randomAdjective2 = Math.floor(Math.random() * (adjectivesObj.length));
  let randomAdjective3 = Math.floor(Math.random() * (adjectivesObj.length));
  let randomAdjective4 = Math.floor(Math.random() * (adjectivesObj.length));
  let randomAdjective5 = Math.floor(Math.random() * (adjectivesObj.length));
  let randomAdjective6 = Math.floor(Math.random() * (adjectivesObj.length));
  let randomArticle = Math.floor(Math.random() * (articlesObj.length));
  let randomArticle2 = Math.floor(Math.random() * (articlesObj.length));
  let randomArticle3 = Math.floor(Math.random() * (articlesObj.length));
  let randomArticle4 = Math.floor(Math.random() * (articlesObj.length));
  let randomArticle5 = Math.floor(Math.random() * (articlesObj.length));
  let randomGerund = Math.floor(Math.random() * (gerundsObj.length));
  let randomGerund2 = Math.floor(Math.random() * (gerundsObj.length));
  let randomGerund3 = Math.floor(Math.random() * (gerundsObj.length));
  let randomNoun = Math.floor(Math.random() * (nounsObj.length));
  let randomNoun2 = Math.floor(Math.random() * (nounsObj.length));
  let randomNoun3 = Math.floor(Math.random() * (nounsObj.length));
  let randomNoun4 = Math.floor(Math.random() * (nounsObj.length));   
  let randomNoun5 = Math.floor(Math.random() * (nounsObj.length));
  let randomNoun6 = Math.floor(Math.random() * (nounsObj.length));
  let randomNoun7 = Math.floor(Math.random() * (nounsObj.length));
  let randomNoun8 = Math.floor(Math.random() * (nounsObj.length)); 
  let randomNoun9 = Math.floor(Math.random() * (nounsObj.length));
  let randomPreposition = Math.floor(Math.random() * (prepositionsObj.length));
  let randomPreposition2 = Math.floor(Math.random() * (prepositionsObj.length));
  let randomPreposition3 = Math.floor(Math.random() * (prepositionsObj.length));
  let randomPreposition4 = Math.floor(Math.random() * (prepositionsObj.length)); 
//   TITLE
  $('#poetry-content1').html(articlesObj[randomArticle] + " " + nounsObj[randomNoun] + ", that is " + articlesObj[randomArticle2] + " " + adjectivesObj[randomAdjective] + " " + nounsObj[randomNoun2]);
//   POEM
  $('#poetry-content1b').html(articlesObj[randomArticle] + " " + nounsObj[randomNoun3] + " " + prepositionsObj[randomPreposition] + " " + nounsObj[randomNoun4] + " and " + articlesObj[randomArticle3] + " " + nounsObj[randomNoun5] + ", " + articlesObj[randomArticle4] + " " + nounsObj[randomNoun6] + " and nothing " + adjectivesObj[randomAdjective2] + " " + articlesObj[randomArticle5] + " " + adjectivesObj[randomAdjective3] + " " + adjectivesObj[randomAdjective4] + " " + nounsObj[randomNoun7] + " and an arrangement " + prepositionsObj[randomPreposition2] + " " + articlesObj[randomArticle3] + " " + nounsObj[randomNoun8] + " " + prepositionsObj[randomPreposition3] + " " + gerundsObj[randomGerund] + ". All this and not " + adjectivesObj[randomAdjective5] + ", not " + adjectivesObj[randomAdjective6] + " " + prepositionsObj[randomPreposition4] + " not " + gerundsObj[randomGerund2] + ". The " + nounsObj[randomNoun9] + " is " + gerundsObj[randomGerund3] + ".");
})

// **************** FOOD ****************
const adjectivesFd = ['single','clear','yellow','wild','laugh&#xad;able','little','dirty','peculiar','merry','heated','violet','necessary','west','whole','better','mellow','real','green','foolish','selfish','character&#xad;istic','dimmer','sooner','calm'
]
const vwladjectivesFd = ['extra','elegant','alright','another','oceanic','artistic','instant','evil','enlivened','alas','any','all','egg','electoral','egg-plant','oat-meal','ice cream','apple','asparagus','anything','elevational'
]
const articlesFd = [
  'a',
  'the'
]
 gerundsFd = [
'pointing','eating','cooking','dining','eating','sleeping','reddening','meaning','feeling','resting','mounting','pinching','sticking','cutting','selecting','widening','seeding','washing','answering','evening','surrounding','dividing','considering','changing']  
 nounsFd = ['roast beef','mutton','breakfast','sugar','milk','lunch','rhubarb','fish','cake','custard','butter','end of summer','celery','veal','vegetable','chicken','pastry','cream','cucumber','dinner','salad','sauce','salmon','orange','cocoa','soup','salad dressing and an artichoke','centre in a table','Susan','coal','bunch','resignation','recognition','recurrence','bed linen','discrimination','circle','sand','rhubarb','vegetable','word','pheasant','chicken','plank','shoulder','mass','sauce','leaker','licker','bay','man','roof','ring','noise','flower','butter','grain','rubber','question','weather','number','time','pin','caution','blanket','cloud','leaf','land','result','today','this','wine','sight','cocoa','part','second','day','sum','cod liver oil','tunny','cream','calmness','outrage'
]
 plrlnounsFd = ['oranges','cranberries','eggs','tails','potatoes','sausages','standards','steamers','curtains','toys','places','loaves','chain-boats','chambers','butterflies','spoons','nuts','potatoes','lakes','owls','needles','eyelets','cups','salmon','tastes','spades','scissors']
 ucPlrlnounsFd = ['Oranges','Cranberries','Eggs','Tails','Potatoes','Sausages','Standards','Steamers','Curtains','Toys','Places','Loaves','Chain-boats','Chambers','Butterflies','Spoons','Nuts','Potatoes','Lakes','Owls','Needles','Eyelets','Salmon','News','Glees','Shoes','Tastes','Spades','Scissors']
 ptverbsFd = ['made','folded','blew','labored','estranged','flowered','striped','managed','sought','curled','read','entangled','surrounded','reduced','revered','resumed','contained','aged','dated','carved','accounted','neglected','recognised','interleaved','asked','mixed','churned','cherished','established','used','buttered','mended','disappointed','cracked','determined','widened','withered','caused','mixed','selected','worsted','colored','accepted','smelled','succeeded','procured','presupposed','messed','placed','shaved','shaded','painted'
]
 prepositionsFd = ['to','through','under','over','between','on','in','above','below','in between','with','for','about','at','because of','from','upon','like','out','by']
 adverbsFd = ['inside','in the morning','in the evening','outside','entirely','alas','why','mostly','next to me','maybe','hurriedly']

// **************** FOOD GENERATOR ****************
$('.generate2').on('click', function newPoem2() {
// RANDOMIZER
  let randomAdjective = Math.floor(Math.random() * (adjectivesFd.length));
  let randomAdjective2 = Math.floor(Math.random() * (adjectivesFd.length));
  let randomAdjective3 = Math.floor(Math.random() * (adjectivesFd.length));
  let randomAdjective4 = Math.floor(Math.random() * (adjectivesFd.length));
  let randomAdjective5 = Math.floor(Math.random() * (adjectivesFd.length));
  let randomAdjective6 = Math.floor(Math.random() * (adjectivesFd.length));
  let randomArticle = Math.floor(Math.random() * (articlesFd.length));
  let randomArticle2 = Math.floor(Math.random() * (articlesFd.length));
  let randomGerund = Math.floor(Math.random() * (gerundsFd.length));
  let randomGerund2 = Math.floor(Math.random() * (gerundsFd.length));
  let randomGerund3 = Math.floor(Math.random() * (gerundsFd.length));
  let randomNoun = Math.floor(Math.random() * (nounsFd.length));
  let randomNoun2 = Math.floor(Math.random() * (nounsFd.length));
  let randomNoun3 = Math.floor(Math.random() * (nounsFd.length));
  let randomNoun4 = Math.floor(Math.random() * (nounsFd.length));   
  let randomNoun5 = Math.floor(Math.random() * (nounsFd.length));
  let randomNoun6 = Math.floor(Math.random() * (nounsFd.length));
  let randomNoun7 = Math.floor(Math.random() * (nounsFd.length));
  let randomPreposition = Math.floor(Math.random() * (prepositionsFd.length));
  let randomPreposition2 = Math.floor(Math.random() * (prepositionsFd.length));
  let randomPreposition3 = Math.floor(Math.random() * (prepositionsFd.length));
  let randomPreposition4 = Math.floor(Math.random() * (prepositionsFd.length));
  let randomPreposition5 = Math.floor(Math.random() * (prepositionsFd.length)); 
  let randomPtverbs = Math.floor(Math.random() * (ptverbsFd.length)); 
  let randomPtverbs2 = Math.floor(Math.random() * (ptverbsFd.length));
  let randomPtverbs3 = Math.floor(Math.random() * (ptverbsFd.length));
  let randomVwladjective = Math.floor(Math.random() * (vwladjectivesFd.length));
  let randomPlrlnoun = Math.floor(Math.random() * (plrlnounsFd.length));
  let randomPlrlnoun2 = Math.floor(Math.random() * (plrlnounsFd.length));
  let randomPlrlnoun3 = Math.floor(Math.random() * (plrlnounsFd.length));
  let randomPlrlnoun4 = Math.floor(Math.random() * (plrlnounsFd.length));
  let randomPlrlnoun5 = Math.floor(Math.random() * (plrlnounsFd.length));
  let randomUcplrlnoun = Math.floor(Math.random() * (ucPlrlnounsFd.length));
  let randomAdverb = Math.floor(Math.random() * (adverbsFd.length)); 
  let randomAdverb2 = Math.floor(Math.random() * (adverbsFd.length));
//   TITLE
  $('#poetry-content2').html(nounsFd[randomNoun]);
//   POEM
  $('#poetry-content2b').html("What is " + ptverbsFd[randomPtverbs] + ". What is " + ptverbsFd[randomPtverbs] + " " + prepositionsFd[randomPreposition] + " it. What is " + ptverbsFd[randomPtverbs] + " " + prepositionsFd[randomPreposition] + " it " + prepositionsFd[randomPreposition2] + "." + "<br/><br/>" + "It was a " + nounsFd[randomNoun] + " a " + nounsFd[randomNoun2] + " a " + nounsFd[randomNoun3] + " and an " + vwladjectivesFd[randomVwladjective] + " " + nounsFd[randomNoun4] + ", it was " + adjectivesFd[randomAdjective] + ", it was " + adjectivesFd[randomAdjective2] + " and " + adjectivesFd[randomAdjective3] + " " + prepositionsFd[randomPreposition3] + " " + adjectivesFd[randomAdjective4] + " " + plrlnounsFd[randomPlrlnoun] + " and " + plrlnounsFd[randomPlrlnoun2] + "." + "<br/><br/>" + ucPlrlnounsFd[randomUcplrlnoun] + ". " + ucPlrlnounsFd[randomUcplrlnoun] + " " + adjectivesFd[randomAdjective5] + " of " + plrlnounsFd[randomPlrlnoun3] + ", " + ptverbsFd[randomPtverbs] + " " + prepositionsFd[randomPreposition4] + " " + plrlnounsFd[randomPlrlnoun4] + ", " + adverbsFd[randomAdverb] + " " + prepositionsFd[randomPreposition5] + " " + articlesFd[randomArticle] + " " + nounsFd[randomNoun6] + " of " + adjectivesFd[randomAdjective6] + " " + plrlnounsFd[randomPlrlnoun5] + ", all this " + gerundsFd[randomGerund] + ".");
})

// **************** ROOMS **************** 
 adjectivesRm = ['silver','south','needed','yellow','bent','plain','haughty','shiny','safe','worse','sensible','terrific','special','wrong','magnificent','continuous','safer','naughty','wretched','silent','cream','white','wide','violent','wet','taller','big','righteous','catholic','regular','together','stationary','golden','sickened','purchased','metal','visible','shown','mercenary','flowered','sudden','vacant','marked','red','dark','rigid','visible','straw color','wholesale','painstaking','shadowed','closer','freer','curly','plentiful','pink','tender','single','resumed']
 vwladjectivesRm = ['alike','active','open','inner','anxious','urgent','exact','even','excellent','awkward','every','outrageous','altogether','entire','agreeable','alright','ample','empty','original','arrangeable','asked']
 articlesRm = ['a','the']
 ucarticlesRm = ['A','The']
 gerundsRm = ['checking','smiling','celebrating','cutting','overbearing','seasoning','drowning','encircling','pleasing','breathing','petting','hanging','scratching','suffering','craving','counting','exchanging','cooking','curving','spelling','clinching','supposing','saving','slanting','borrowing','serving','coloring','making','burning','relying','folding','changing','walking','piling','giving','opening','gliding','fitting','rejoining','holding','failing','earning','living','swelling','lingering','explaining','kneeling','relating','darkening','expecting','spreading','accomplishing','offering','dressing','preparing']  
 nounsRm = ['occupation','centre','prepar&#xad;ation','temperature','cape','color','seduction','light','moon','Sunday','decision','music','choice','torch','collection','vacation','hat','noise','cultivation','likeness','cloud','sacrifice','pedestrianism','reso&#xad;lution','care','rain','green','whiteness','chair','fountain','morning','way','surprise','section','season','weight','spectacle','game','summer','lilac','mention','butter','bread','resem&#xad;blance','pussy cat','tobacco','zone','willow','window','stranger','wideness','center','church','habit','mountain','notion','line','clearness','yesterday','weather','one','nausea','disappointment','surveyance','debate','stranger','dedication','splendor','something','venture','youth','lap','sign','extension','soldier','detail','case of measles','powder','legality','circum&#xad;stance','sweetness','serenity','nothing','chamber','currency','legality','sound','clergyman','tax','grain','charity','stubble','piece','lamp light','victory','wood','water','cake','recitation','design','change','sugar','lover','distractor','measure','monster','room','harmony','hesitation','obligingness','no doubt','singularity','quaintness','placard','virtue','set','current','climate','tumbler','color','pre-&#xad;occupation','preparation','star-light','sun','life','equator','cook','stairway','face','mixture','voice','varnish','tribune','paper','nose','spice','sleep','daylight','defiance','distaste','beefsteak','desertion','eclipse','bather','connection','thing','dinner','hair','tidiness','delicacy','bell','sunshine','shape','hill','cloth','mirror','manikin','student','star','spark','birthday','memory','harmony','room','fact','vision']
 plrlnounsRm = ['days','committees','squares','declarations','books','slippers','tears','cases','mistakes','rights','finger-nails','invitations','hands','shoals','blisters','sisters','currents','trees','cadences','squares','blotters','rooms','vacancies','gallons','plums','spoons','silences']
 ucPlrlnounsRm = ['Oranges','Cranberries']
 ptverbsRm = ['made','folded']
 prepositionsRm = ['to','through','under','over','between','on','in','above','below','in between','with','for','about','at','because of','from','upon','like','out','by','as','after']
 adverbsRm = ['likely','only','more','same','often','all','certainly','mildly','uselessly','frequently']
 verbsRm = ['determines','pleases','shows','translates','means','dances','dreams','turns','secures','leads','surfaces','discloses','fastens','diminishes','astonishes','surrounds','refuses','springs','rings','feeds','stands','silences','pleases','acts']
 vowelnounsRm = ['allevi&#xad;ation','insist&#xad;ence','elephant','asparagus','occasion','ingredient','accumulation','excellence','escape','anger','admin&#xad;istration','education','evasion','expression','attention','excite&#xad;ment','acquaint&#xad;ance','erection','exalt&#xad;ation','audience','order','outline','echo','exercise','example','emigration','use']

// **************** ROOMS GENERATOR ****************
$('.generate3').on('click', function newPoem3() {
// RANDOMIZER
  let randomAdjective = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective2 = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective3 = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective4 = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective5 = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective6 = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective7 = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective8 = Math.floor(Math.random() * (adjectivesRm.length));
  let randomAdjective9 = Math.floor(Math.random() * (adjectivesRm.length));  
  let randomArticle = Math.floor(Math.random() * (articlesRm.length));
  let randomArticle2 = Math.floor(Math.random() * (articlesRm.length));
  let randomArticle3 = Math.floor(Math.random() * (articlesRm.length));
  let randomArticle4 = Math.floor(Math.random() * (articlesRm.length));
  let randomArticle5 = Math.floor(Math.random() * (articlesRm.length));   
  let randomArticle6 = Math.floor(Math.random() * (articlesRm.length));
  let randomArticle7 = Math.floor(Math.random() * (articlesRm.length));
  let randomArticle8 = Math.floor(Math.random() * (articlesRm.length));
  let randomUcarticle = Math.floor(Math.random() * (ucarticlesRm.length));
  let randomGerund = Math.floor(Math.random() * (gerundsRm.length));
  let randomGerund2 = Math.floor(Math.random() * (gerundsRm.length));
  let randomGerund3 = Math.floor(Math.random() * (gerundsRm.length));
  let randomGerund4 = Math.floor(Math.random() * (gerundsRm.length));
  let randomGerund5 = Math.floor(Math.random() * (gerundsRm.length));  
  let randomGerund6 = Math.floor(Math.random() * (gerundsRm.length)); 
  let randomGerund7 = Math.floor(Math.random() * (gerundsRm.length));  
  let randomGerund8 = Math.floor(Math.random() * (gerundsRm.length));
  let randomNoun = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun2 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun3 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun4 = Math.floor(Math.random() * (nounsRm.length)); 
  let randomNoun5 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun6 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun7 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun8 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun9 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun10 = Math.floor(Math.random() * (nounsRm.length)); 
  let randomNoun11 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun12 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun13 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun14 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun15 = Math.floor(Math.random() * (nounsRm.length)); 
  let randomNoun16 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun17 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun18 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun19 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun20 = Math.floor(Math.random() * (nounsRm.length));   
  let randomNoun21 = Math.floor(Math.random() * (nounsRm.length));  
  let randomNoun22 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun23 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun24 = Math.floor(Math.random() * (nounsRm.length));
  let randomNoun25 = Math.floor(Math.random() * (nounsRm.length));   
  let randomNoun26 = Math.floor(Math.random() * (nounsRm.length));  
  let randomNoun27 = Math.floor(Math.random() * (nounsRm.length)); 
  let randomNoun28 = Math.floor(Math.random() * (nounsRm.length));   
  let randomNoun29 = Math.floor(Math.random() * (nounsRm.length));  
  let randomNoun30 = Math.floor(Math.random() * (nounsRm.length));  
  let randomNoun31 = Math.floor(Math.random() * (nounsRm.length)); 
  let randomNoun32 = Math.floor(Math.random() * (nounsRm.length));   
  let randomVowelnoun = Math.floor(Math.random() * (vowelnounsRm.length));
  let randomPreposition = Math.floor(Math.random() * (prepositionsRm.length));
  let randomPreposition2 = Math.floor(Math.random() * (prepositionsRm.length));
  let randomPreposition3 = Math.floor(Math.random() * (prepositionsRm.length));
  let randomPreposition4 = Math.floor(Math.random() * (prepositionsRm.length));
  let randomPreposition5 = Math.floor(Math.random() * (prepositionsRm.length)); 
  let randomPtverbs = Math.floor(Math.random() * (ptverbsRm.length)); 
  let randomPtverbs2 = Math.floor(Math.random() * (ptverbsRm.length));
  let randomPtverbs3 = Math.floor(Math.random() * (ptverbsRm.length));
  let randomVwladjective = Math.floor(Math.random() * (vwladjectivesRm.length));
  let randomPlrlnoun = Math.floor(Math.random() * (plrlnounsRm.length));
  let randomPlrlnoun2 = Math.floor(Math.random() * (plrlnounsRm.length));
  let randomPlrlnoun3 = Math.floor(Math.random() * (plrlnounsRm.length));
  let randomPlrlnoun4 = Math.floor(Math.random() * (plrlnounsRm.length));
  let randomPlrlnoun5 = Math.floor(Math.random() * (plrlnounsRm.length));
  let randomUcplrlnoun = Math.floor(Math.random() * (ucPlrlnounsRm.length));
  let randomAdverb = Math.floor(Math.random() * (adverbsRm.length)); 
  let randomAdverb2 = Math.floor(Math.random() * (adverbsRm.length));
  let randomVerb = Math.floor(Math.random() * (verbsRm.length));  
//   TITLE
  $('#poetry-content3').html(nounsRm[randomNoun] + " Room");
//   POEM
  $('#poetry-content3b').html(ucarticlesRm[randomUcarticle] + " " + nounsRm[randomNoun2] + " " + prepositionsRm[randomPreposition] + " " + articlesRm[randomArticle] + " " + nounsRm[randomNoun3] + " " + articlesRm[randomArticle2] + " " + adjectivesRm[randomAdjective] + " " + nounsRm[randomNoun2] + " is " + prepositionsRm[randomPreposition2] + " " + nounsRm[randomNoun4] + ". " + "What was " + articlesRm[randomArticle2] + " " + adjectivesRm[randomAdjective2] + " " + nounsRm[randomNoun5] + "." + " The " + adjectivesRm[randomAdjective2] + " " + nounsRm[randomNoun5] + " was that not&#xad;with&#xad;standing " + adjectivesRm[randomAdjective2] + " " + plrlnounsRm[randomPlrlnoun] + " and more " + nounsRm[randomNoun6] + ", not even not&#xad;with&#xad;standing " + articlesRm[randomArticle3] + " " + nounsRm[randomNoun7] + " and " + articlesRm[randomArticle4] + " " + nounsRm[randomNoun6] + " and " + articlesRm[randomArticle5] + " " + nounsRm[randomNoun9] + ", not&#xad;with&#xad;standing " + articlesRm[randomArticle6] + " " + gerundsRm[randomGerund] + " " + nounsRm[randomNoun10] + " and " + articlesRm[randomArticle7] + " " + nounsRm[randomNoun11] + " and even more " + nounsRm[randomNoun12] + " than " + gerundsRm[randomGerund2] + ", not&#xad;with&#xad;standing " + nounsRm[randomNoun13] + " and " + nounsRm[randomNoun14] + " and being " + gerundsRm[randomGerund3] + ", not even not&#xad;with&#xad;standing an " + vowelnounsRm[randomVowelnoun] + " and a " + adjectivesRm[randomAdjective4] + " " + nounsRm[randomNoun15] + ", not even with&#xad;standing more " + nounsRm[randomNoun16] + " and some " + gerundsRm[randomGerund4] + ", not even with " + gerundsRm[randomGerund5] + " and with the " + nounsRm[randomNoun17] + " being " + gerundsRm[randomGerund6] + ", not even with more " + nounsRm[randomNoun18] + " and any " + nounsRm[randomNoun19] + ", not even with " + adjectivesRm[randomAdjective5] + " " + nounsRm[randomNoun20] + " of " + nounsRm[randomNoun21] + " and a " + adjectivesRm[randomAdjective6] + " " + nounsRm[randomNoun22] + ", not even more " + adverbsRm[randomAdverb] + " to be " + gerundsRm[randomGerund7] + ". The " + nounsRm[randomNoun23] + " with which the " + nounsRm[randomNoun24] + " is " + adjectivesRm[randomAdjective7] + " and the " + nounsRm[randomNoun25] + " is " + adjectivesRm[randomAdjective8] + " and the " + nounsRm[randomNoun26] + " is " + adjectivesRm[randomAdjective7] + ", the " + nounsRm[randomNoun27] + " with which there is " + articlesRm[randomArticle8] + " " + nounsRm[randomNoun28] + " and plenty of " + gerundsRm[randomGerund8] + ". The " + nounsRm[randomNoun23] + " with which there is a " + adjectivesRm[randomAdjective8] + " " + nounsRm[randomNoun29] + " and " + nounsRm[randomNoun30] + ", all this " + verbsRm[randomVerb] + " a " + adjectivesRm[randomAdjective9] + " " + nounsRm[randomNoun30] + ", and also a " + nounsRm[randomNoun32] + ".");
})

// **************** HIDE OTHER COLUMNS **************** 
$('#b1').click (hide23);

function hide23(){
  $('#poetry-content1').show();
  $('#poetry-content1b').show();
  $('#poetry-content2').hide();
  $('#poetry-content2b').hide();
  $('#poetry-content3').hide();
  $('#poetry-content3b').hide();
  $('.left').css("background-image", "linear-gradient(to top, #96fbc4 0%, #f9f586 100%)");
  console.log ('yes');
  $('.center').css("background-image", "none");
  $('.right').css("background-image", "none");
}

$('#b2').click (hide13);

function hide13(){
  $('#poetry-content1').hide();
  $('#poetry-content1b').hide();
  $('#poetry-content2').show();
  $('#poetry-content2b').show();
  $('#poetry-content3').hide();
  $('#poetry-content3b').hide();
  $('.center').css("background-image", "linear-gradient(to top, #96fbc4 0%, #f9f586 100%)");
  $('.left').css("background-image", "none");
  $('.right').css("background-image", "none");
  console.log ('yes');
}

$('#b3').click (hide12);

function hide12(){
  $('#poetry-content1').hide();
  $('#poetry-content1b').hide();
  $('#poetry-content2').hide();
  $('#poetry-content2b').hide();
  $('#poetry-content3').show();
  $('#poetry-content3b').show();
  $('.right').css("background-image", "linear-gradient(to top, #96fbc4 0%, #f9f586 100%)");
   $('.left').css("background-image", "none");
  $('.center').css("background-image", "none");
}

// **************** ABOUT POPUP ****************

function about_open() { 
  $('#myAbout').css("display", "block");
  $('#hide2').css("display", "none");
}
function about_close() {
  $('#myAbout').css("display", "none");
  $('#hide2').css("display", "block");
}
            
          
!
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.

Console