JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<div id="inputWords">
 <ul>
   <li>
      <br>
      </li>
      <!-- put other input fields her -->
      
      </ul>
</div>
<div id="story">
</div>
<button id="replaceButton">Sarch</button>
<div id="screen"><p>
Google+
</p>
<input text id="adj1"></div>

CSS

body {
    font-family: "Computer setting";
		background-color: black;
}
p {
	  font-size: 4em;
		color: blue;
}
#inputWords {
    float:left;
    width: 45%;
}
ul {
     list-style-type: none;
     padding: 0px;
     margin: 0px;
}
li {
   line-height: 2em;
   text-transform: uppercase;
   margin-top: 8px;
}

#buttonDiv {
    text-align: center;
}
#replaceButton {
    margin-top: 30px;
    width: 200px;
}
#story {
    margin-top: 12px;
    width: 45%;
    border: 1px dashed blue;
    padding: 8px;
}
.replacement {
    text-decoration: underline;
    text-transform: uppercase;
}
#screen {
	    position: absolute;
			left: 0%;
			top: 20%;
			width: 100%;
			height: 50%;
			background-color: black;
			text-align:center;
			padding-top: 1px;
}
#adj1 {
	  top: 30%;
		left: 0%;
		width: 30%;
		height: 10%;
		background-color: blue;
}

JavaScript

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

function replaceIt() {
    document.getElementById("story").style.color = "red";
    var storyDiv = document.getElementById("story");
    var adj1 = "<span class='replacement'>"+ document
   .getElementById("adj1").value + "</span>";
     /* Insert  more varible definitions here */
     var  theStory = ""; + adj1 + "";
     theStory += "ok " + adj1 + " it's a word and it's cool";
     /* Put the the story here, using the +=
    operator */
     storyDiv.innerHTML = theStory;
}
// Change the text color.
 document.getElementBId("story").style.color = "red";