<div class="wrapper">
  <div>
    <h1>Click</h1>
    <button id="click">Click!</button>
    <p id="clickp">Click the button to change this paragraph.</p>
  </div>
  <div>
    <h1>Hide</h1>
    <button id="hide">Hide!</button>
    <p id="hidep">Click the button to hide this paragraph.</p>
  </div>
  <div>
    <h1>Show</h1>
    <button id="show">Show!</button>
    <p>I'm lonely without the last paragraph. Click the button to show the last paragraph.</p>
  </div>
  <div>
    <h1>Toggle</h1>
    <button id="toggle">Toggle!</button>
    <p id="togglep">Click the button to toggle this paragraph. Now you see me, now you don't.</p>
  </div>
  <div>
    <h1>Slide Down</h1>
    <button id="slideDown">Slide down...?</button>
    <p id="slideDownp">You clicked the button and slid this paragraph down! Yay!</p>
  </div>
  <div>
    <h1>Slide Up</h1>
    <button id="slideUp">Slide up!</button>
    <p>I'm done seeing that paragraph now, though. Click this button to make it slide back up.</p>
  </div>
  <div>
    <h1>Slide Toggle</h1>
    <button id="slideToggle">Toggle slide!</button>
    <p id="slideTogglep">Who needs two buttons to do that, anyway? Click this button to toggle slide up/down.</p>
  </div>
  <div>
    <h1>Fade In</h1>
    <button id="fadein">Fade In!!!</button>
    <p id="fadeinp">Say please next time and I'll fade in a little quicker.</p>
  </div>
  <div>
    <h1>Fade Out</h1>
    <button id="fadeout">Fade Out!</button>
    <p id="fadeoutp">Click this button and whisk me away into the void through a fade out, where I am destined to live for all of eternity.</p>
  </div>
  <div>
    <h1>Add Class</h1>
    <button id="addclass">Add Class!</button>
    <p id="addclassp">I'm feeling crass and could really use some class. Can you click that button so I can get some?</p>
  </div>
  <div>
    <h1>Before</h1>
    <button id="before">Add Before!</button>
    <p id="beforep">What comes before the storm? Click to add a sibling element before this element and find out.</p>
  </div>
  <div>
    <h1>After</h1>
    <button id="after">Add After!</button>
    <p id="afterp">You know the drill by now. Click to add something after this paragraph, which will be a sibling of this element.</p>
  </div>
  <div>
    <h1>Append</h1>
    <button id="append">Append!</button>
    <p id="appendp">Click the button to append something to the end of this paragraph, creating an element that is a CHILD of this element.</p>
  </div>
  <div>
    <h1>Prepend</h1>
    <button id="prepend">Prepend!</button>
    <p id="prependp">Do the same thing as above when you click the button, but add the child BEFORE the element.</p>
  </div>
  <div>
    <h1>HTML</h1>
    <button id="html">Change!</button>
    <p id="htmlp">Click to change the HTML of this paragraph.</p>
  </div>
  <div>
    <h1>attr</h1>
    <button id="attr">Click</button>
    <p id="attrp">Click to give this paragraph a title when you hover over it.</p>
  </div>
  <div>
    <h1>val</h1>
    <button id="val">Give Input!</button>
    <input id="valin" value="Click to input button's text."></input>
    <p id="valp"></p>
  </div>
  <div>
    <h1>text</h1>
    <button id="text">Click!</button>
  <p id="textp">Now back to something I completely understand that strangely enough is the last item on the list but arguably the one that I have been using the most in this whole assignment! Click to change the text!?!</p>
  </div>
</div>