<link href="https://fonts.googleapis.com/css?family=Corben:700" rel="stylesheet">

<strong class="mad">MAD LIBS</strong><br>
<!--<br><br><button id="randomize-all">RANDOMIZE ALL</button>-->
<div id="input-block">
  <ul>
    <li><label for="verb1">VERB</label> <input type="textbox" id="inputOne"/>
      <!--<button>RANDOMIZE!</button>-->
    </li>
    <li><label for="adjective1">ADJECTIVE</label> <input type="textbox" id="inputTwo" /></li>
    <li><label for="verb1">VERB</label> <input type="textbox" id="inputThree" /></li>
    <li><label for="noun-plural1">NOUN (PLURAL)</label> <input type="textbox" id="inputFour" /></li>
    <li><label for="weapon-plural">WEAPON (PLURAL)</label> <input type="textbox" id="inputFive" /></li>
    <li><label for="adjective2">ADJECTIVE</label> <input type="textbox" id="inputSix" /></li>
    <li><label for="noun1">NOUN</label> <input type="textbox" id="inputSeven" /></li>
    <li><label for="food-plural-1">FOOD (PLURAL)</label> <input type="textbox" id="inputEight" /></li>
    <li><label for="verb2">VERB</label> <input type="textbox" id="inputNine" /></li>
    <li><label for="adjective3">ADJECTIVE</label> <input type="textbox" id="inputTen" /></li>
    <li><label for="noun2">NOUN</label><input type="textbox" id="inputEleven" /></li>
    <li><label for="verb3">VERB</label><input type="textbox" id="inputTwelve" /></li>
    <li><label for="noun3">NOUN</label><input type="textbox" id="inputThirteen" /></li>
    <li><label for="verbed">VERB ENDING IN "ED"</label><input type="textbox" id="inputFourteen" /></li>
    <li><label for="noun4">NOUN</label><input type="textbox" id="inputFifteen" /></li>
    <li><label for="adjective4">ADJECTIVE</label><input type="textbox" id="inputSixteen" /></li>
    <li><label for="noun4">NOUN</label><input type="textbox" id="inputSeventeen" /></li>
    <li><label for="noun5">NOUN(PLURAL)</label><input type="textbox" id="inputEighteen" /></li>
    <li><label for="noun6">NOUN</label><input type="textbox" id="inputNineteen" /></li>
    <li><label for="adjective5">ADJECTIVE</label><input type="textbox" id="inputTwenty" /></li>
    <br><button id="submit">GO MAD!!!</button>
</div>
<div id="excerpt">
  To <span class="blank" id="one">_____</span>, or not to <span class="blank" id="two">_______</span>,--that is the
  question:-- <br>
  Whether `tis more <span class="blank" id="three">_____</span> in the mind to <span class="blank"
    id="four">_____</span> <br>
  The <span class="blank" id="five">_____</span> and <span class="blank" id="six">____</span> of <span class="blank"
    id="seven">_____</span> fortune <br>
  Or to take <span class="blank" id="eight">_____</span> against a sea of <span class="blank" id="nine">______</span>,
  <br>
  And by opposing end them?--To die,--to <span class="blank" id="ten">_____</span>,-- <br>
  No more; and by a <span class="blank" id="eleven">_____</span> to say we end <br>
  The heartache, and the thousand <span class="blank" id="twelve">_____</span> shocks <br>
  That flesh is heir to,--`tis a <span class="blank" id="thirteen">_____</span> <br>
  Devoutly to be wish`d. To die,--to <span class="blank" id="fourteen">_____</span>;-- <br>
  To <span class="blank" id="fifteen">_____</span>! perchance to dream:--ay, there`s the <span class="blank"
    id="sixteen">_____</span>; <br>
  For in that <span class="blank" id="seventeen">_____</span> of death what dreams may come, <br>
  When we have <span class="blank" id="eighteen">_____</span> off this mortal <span class="blank"
    id="nineteen">_____</span>, <br>
  Must give us pause: there`s the respect <br>
  That makes calamity of so <span class="blank" id="twenty">_____</span> life... <br> <br><button id="try-again">GO
    <strong>MAD AGAIN!!!</button>
</div>
.mad {
  font-family: "Corben";
  font-size: 30px;
}

body {
  font-family: Helvetica;
  margin: 50px 100px;
}

ul {
  list-style-type: none;
}

li {
  margin: 5px 0;
}

input {
  width: 150px;
}

label {
  display: inline-block;
  width: 230px;
}

input {
  margin-left: 15px;
}

#input-block {
  float: left;
  display: block;
  margin-right: 100px;
}

#excerpt {
  float: left;
  display: block;
}

em {
  color: crimson;
}
document.getElementById("submit").onclick = 
  function(){
    madLib();
};
document.getElementById("try-again").onclick =
  function(){
    madLib();
};

function madLib(){
  var text;
    text = document.getElementById("inputOne").value;
    document.getElementById("one").innerHTML = text;
    text = document.getElementById("inputTwo").value;
    document.getElementById("two").innerHTML = text;
    text = document.getElementById("inputThree").value;
    document.getElementById("three").innerHTML = text;
    text = document.getElementById("inputFour").value;
    document.getElementById("four").innerHTML = text;
    text = document.getElementById("inputFive").value;
    document.getElementById("five").innerHTML = text;
    text = document.getElementById("inputSix").value;
    document.getElementById("six").innerHTML = text;
    text = document.getElementById("inputSeven").value;
    document.getElementById("seven").innerHTML = text;
    text = document.getElementById("inputEight").value;
    document.getElementById("eight").innerHTML = text;
  
    text = document.getElementById("inputNine").value;
    document.getElementById("nine").innerHTML = text;
    text = document.getElementById("inputTen").value;
    document.getElementById("ten").innerHTML = text;
    text = document.getElementById("inputEleven").value;
    document.getElementById("eleven").innerHTML = text;
    text = document.getElementById("inputTwelve").value;
    document.getElementById("twelve").innerHTML = text;
    text = document.getElementById("inputThirteen").value;
    document.getElementById("thirteen").innerHTML = text;
    text = document.getElementById("inputFourteen").value;
    document.getElementById("fourteen").innerHTML = text;
    text = document.getElementById("inputFifteen").value;
    document.getElementById("fifteen").innerHTML = text;
    text = document.getElementById("inputSixteen").value;
    document.getElementById("sixteen").innerHTML = text;
  
    text = document.getElementById("inputSeventeen").value;
    document.getElementById("seventeen").innerHTML = text;
    text = document.getElementById("inputEighteen").value;
    document.getElementById("eighteen").innerHTML = text;
    text = document.getElementById("inputNineteen").value;
    document.getElementById("nineteen").innerHTML = text;
    text = document.getElementById("inputTwenty").value;
    document.getElementById("twenty").innerHTML = text;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js