JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<button id="replaceButton">face and eyes</button>
<div id="body"></div>
<div id="body2"></div>
<button id="mouthButton">mouth and nose</button>
<button id="eyesButton">
body
</button>
<div id="nose"></div>
<div class="eye" id="righteye"></div>
<div class="eye" id="lefteye"></div>
<div class="arm" id="rightarm"></div>
<div class="arm" id="leftarm"></div>
<div id="mouth"></div>
<div id="bb"><h1>
make a cool video game man
</h1>

CSS

body {
    font-family: "Comic Sans MS";
		background-color: black;
}
h1 {
	  font-size: 3em;
		color: green;
}

#body {
	  position: absolute;
		left: 30%;
		width: 30%;
		height: 30%;
		top: 30%;
		border-radius: 50px;
		background-color:;
}

#body2 {
	    position: absolute;
			left: 15%;
			top: 60%;
			width: 60%;
			height: 40%;
			background-color: ;
}
.eye {
	 border-radius: 50%;
	 width: 5%;
	 height: 5%;
	 background-color:;
}
#righteye {
	     position: absolute;
			 left: 35%;
			 top: 35%;
}
#lefteye {
	    position: absolute;
			left: 50%;
			top: 35%;
}

#mouth {
	  position: absolute;
		left: 35%;
		top: 53%;
		width: 20%;
		height: 3%;
		background-color:;
}
#nose {
	   position: absolute;
		 left: 43%;
		 top: 43%;
		 width: 2%;
		 height: 2%;
		 background-color: ;
}
#b {
	  position: absolute;
		left: 0%;
		top: 5%;
    width: 80%;
		height: 20%;
		background-color: black;
}

JavaScript

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

function replaceIt(){
 document.getElementById("body")
 .style.backgroundColor = "";
document.getElementById("body")
.style.backgroundColor = "#FFA07A";
document.getElementById("lefteye")
.style.backgroundColor = "black";
document.getElementById("righteye")
.style.backgroundColor = "black";
}

var eyesButton = document
   .getElementById("eyesButton");
eyesButton.addEventListener("click",replapeIt);

 function replapeIt(){
  document.getElementById("body2")
	.style.backgroundColor = "red";
}


var mouthButton = document
   .getElementById("mouthButton");
mouthButton.addEventListener("click",replaxeIt);

function replaxeIt(){
 document.getElementById("mouth")
 .style.backgroundColor = "red";
}

function replaseIt(){
  document.getElementById("nose")
	.style.backgroundColor = "yellow";
	document.getElementById("mouth")
	.style.backgroundColor = "red";
}