<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="1" /><!--<button>RANDOMIZE!</button>--></li>
    <li><label for="adjective1">VERB</label> <input type="textbox" id="2"/></li>
    <li><label for="verb1">VERB</label> <input type="textbox" id="3" /></li>
    <li><label for="noun-plural1">NOUN (PLURAL)</label> <input type="textbox" id="4"/></li>
    <li><label for="weapon-plural">WEAPON (PLURAL)</label>	<input type="textbox" id="5"/></li>
    <li><label for="adjective2">ADJECTIVE</label> <input type="textbox" id="6"/></li>
    <li><label for="noun1">NOUN</label>	<input type="textbox" id="7"/></li>
    <li><label for="food-plural-1">FOOD (PLURAL)</label>	<input type="textbox" id="8"/></li>
    <li><label for="verb2">VERB</label>	<input type="textbox" id="9"/></li>
    <li><label for="adjective3">ADJECTIVE</label>	<input type="textbox" id="10"/></li>
    <li><label for="noun2">NOUN</label><input type="textbox" id="11"/></li>
    <li><label for="verb3">VERB</label><input type="textbox" id="12"/></li>
    <li><label for="noun3">NOUN</label><input type="textbox" id="13"/></li>
    <li><label for="verbed">VERB ENDING IN "ED"</label><input type="textbox" id="14"/></li>
    <li><label for="noun4">NOUN</label><input type="textbox" id="15"/></li>
    <li><label for="adjective4">ADJECTIVE</label><input type="textbox" id="16"/></li>
    <li><label for="noun4">NOUN</label><input type="textbox" id="17" /></li>
    <li><label for="noun5">NOUN(PLURAL)</label><input type="textbox" id="18" /></li>
    <li><label for="noun6">NOUN</label><input type="textbox" id="19" /></li>
    <li><label for="adjective5">ADJECTIVE</label><input type="textbox" id="20" /></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;
}
function MDL(){
  var lib;
    lib = document.getElementById('1').value;
    document.getElementById("one").innerHTML = lib;
    lib = document.getElementById("2").value;
    document.getElementById("two").innerHTML = lib;
    lib = document.getElementById("3").value;
    document.getElementById("three").innerHTML = lib;
    lib = document.getElementById("4").value;
    document.getElementById("four").innerHTML = lib;
    lib = document.getElementById("5").value;
    document.getElementById("five").innerHTML = lib;
    lib = document.getElementById("6").value;
    document.getElementById("six").innerHTML = lib;
    lib = document.getElementById("7").value;
    document.getElementById("seven").innerHTML = lib;
    lib = document.getElementById("8").value;
    document.getElementById("eight").innerHTML = lib;
    lib = document.getElementById("9").value;
    document.getElementById("nine").innerHTML = lib;
    lib = document.getElementById("10").value;
    document.getElementById("ten").innerHTML = lib;
    lib = document.getElementById("11").value;
    document.getElementById("eleven").innerHTML = lib;
    lib = document.getElementById("12").value;
    document.getElementById("twelve").innerHTML = lib;
    lib = document.getElementById("13").value;
    document.getElementById("thirteen").innerHTML = lib;
    lib = document.getElementById("14").value;
    document.getElementById("fourteen").innerHTML = lib;
    lib = document.getElementById("15").value;
    document.getElementById("fifteen").innerHTML = lib;
    lib = document.getElementById("16").value;
    document.getElementById("sixteen").innerHTML = lib;
    lib=document.getElementById("17").value;
    document.getElementById('seventeen').innerHTML=lib;
    lib=document.getElementById("18").value;
    document.getElementById('eighteen').innerHTML=lib;
    lib=document.getElementById("19").value;
    document.getElementById('nineteen').innerHTML=lib;
    lib=document.getElementById("20").value;
    document.getElementById('twenty').innerHTML=lib;
};
document.getElementById("submit").onclick = 
  function(){
    MDL();
};
document.getElementById("try-again").onclick =
  function(){
    MDL();
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.