text it website

by Daniel Hall

HTML

<div id="inputWords">
      <input id="adj1">
      <!-- put other input fields here -->
<div id="story">

</div>

<button id="replaceButton">print text</button>
<div id="body"></div>
<button id="button">white print color</button>
<button id="v"></button>
<button id="b"></button>
<button id=""

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: 60%;
    top: 0%;
		width: 20%;
		height: 5%;
		background-color: gray;
		position: absolute;
		border-radius: 10%;
		border-top: 50%;
		color: yellow;
}
#adj1 {
	   background-color: gray;
		 height: 36%;
		 top: 5%;
		 left: 34%;
		 width: 50%;
		 color: #bababa;
		 position: absolute;
		 text-align:top;
}
#button {
	    position: absolute;
			left:40%;
			top: 0%;
			width: 20%;
			height: 5%;
			color: yellow;
			border-radius: 10%;
			background-color: gray;
}

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;
}
var button = document
   .getElementById("button");
button.addEventListener("click",replapeIt);

function replapeIt(){
  //Change the text color.
	document.getElementById("story")
	.style.backgroundColor = "white";
}