JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<div id="inputWords">
 <ul>
   <li>
      <input type="text" id="adj1">
      <br>name your babys one name
      </li>
      <!-- put other input fields here -->
      
      </ul>
</div>
<div id="story">

</div>
<button id="replaceButton">1,000 baby</button>
<div id="head"></div>
<div id="mouth"></div>
<div class="eye" id="righteye"></div>
<div class="eye" id="lefteye"></div>
<div id="BT"></div>
<div id="bed"></div>
<div class="bedb" id="rightb"></div>
<div class="bedb" id="leftb"></div>
<div id="flore"></div>

CSS

body {
    font-family: "Comic Sans MS";
		background-color: gray;
}
#inputWords {
    float:left;
    width: 45%;
}
ul {
     list-style-type: none;
     padding: 0px;
     margin: 0px;
}
li {
   line-height: 2em;
   text-transform: uppercase;
   margin-top: 8px;
}
input[type=text] {
    border-width: 0 0 1px 0;
    border-color: #333;
}
#buttonDiv {
    text-align: center;
}
#replaceButton {
    margin-top: 30px;
    width: 200px;
}
#story {
    margin-top: 12px;
    width: 45%;
    border: 1px dashed blue;
    padding: 8px;
    float: left;
}
.replacement {
    text-decoration: underline;
    text-transform: uppercase;
}
#head {
	 position: absolute;
	 left: 50%;
	 top: 60%;
	 width: 10%;
	 height: 10%;
	 border-radius: 15px;
	 background-color: #CD9999;
}
#mouth {
	   position: absolute;
		 left: 53%;
		 top: 68%;
		 width: 4%;
		 height: 1%;
		 background-color: black;
}
.eye {
	  background-color: black;
		width: 1%;
		height: 1%;
		border-radius: 15%;
}
#righteye {
	   position: absolute;
		 left: 53%;
		 top: 63%;
}
#lefteye {
	   position: absolute;
		 left: 56%;
		 top: 63%;
}
#BT {
	  position: absolute;
		left: 30%;
		top: 70%;
		width: 30%;
		height: 10%;
		background-color: blue;
}
#bed {
	  position: absolute;
		left: 30%;
		top: 75%;
		width: 30%;
		height: 5%;
		background-color: #A52A2A;
}
.bedb {
	  background-color: #A52A2A;
		width: 1%;
		height: 3%;
}
#rightb {
	   position: absolute;
		 left: 30%;
		 top: 78%;
}
#leftb {
	  position: absolute;
		left: 59%;
		top: 78%;
}
#flore {
	  position: absolute;
		left: 0%;
		top: 81%;
		width: 100%;
		height: 19%;
		background-color: black;
}

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>your wife had</h1>";
     theStory += "150 girls and 850 boys and they are all named " + adj1 + "";
     /* Put the the story here, using the +=
    operator */
     storyDiv.innerHTML = theStory;
}
document.getElementById("head")
     .style.borderTop = "8px black solid";