Js - fiddle type writer

by Daniel Hall

HTML

<div id="inputWords">
<h1>
Js-type writer
</h1>
 <ul>
   <li>step 1 type in something
      <input id="adj1">
      </li>
      <!-- put other input fields here -->
      
      </ul>
</div>
<div id="story">

</div>

<button id="replaceButton">your paper</button>
<div id="body"></div>

<li> step 2 click the button that says your paper</li>
<li>step 3 you have to there have not be a step 3</li>

CSS

body {
    font-family: "Courier New";
		background-color: #cacaca;
}
#story {
    margin-top: 150px;
    width: 30%;
    border: 1px dashed #cacaca;
    padding: 8px;
    float: left;
}
#body {
	  position: absolute;
		left: 0%;
		top: 20%;
		width: 30%;
		height: 20%;
}
#replaceButton {
	  left: 70%;
    top: 30%;
		width: 20%;
		height: 20%;
		background-color: gray;
		position: absolute;
		border-radius: 10%;
		border-top: 50%;
		color: yellow;
}
#adj1 {
	   background-color: gray;
		 height: 10%;
		 top: 30%;
		 position: absolute;
}

JavaScript

var replaceButton = document
   .getElementById("replaceButton");
replaceButton.addEventListener("click",replaceIt);

function replaceIt() {
    var storyDiv = document.getElementById("story");
    var adj1 = "<span class='replacement'>"+ document
   .getElementById("adj1").value + "</span>";
     /* Insert  more varible definitions here */
     var  theStory = "<h1></h1>";
     theStory += " " + adj1 + "";
     /* Put the the story here, using the +=
    operator */
     storyDiv.innerHTML = theStory;
}