JSFiddle - React, Tailwind, and code Playground

by Littledoggy12

HTML

<html>
  <head>
    <title>CSS test</title>
  </head>
  <body>
  <div id = "face"></div>
  <div id = "nose"></div>
  <div id = "rightEye"></div>
  <div id = "leftEye"></div>
  <div id = "mouth"></div>
  <div id = "body" class = "bodyPart"></div>
  <div id = "rightArm" class = "bodyPart"></div>
  <div id = "leftArm" class = "bodyPart"></div>
  <p>Hi</p>
  <button id = "changeEyes">
    Evil
  </button>
  </body>
</html>

CSS

body {
  background: #C4FF16;
}

p {
 position: absolute;
 font-family: Times New Roman;
 font-size: 6em;
 left: 51%;
}


#face {
  position: absolute;
  background: blue;
  width: 50%;
  height: 80%;
  border-radius: 70%;
}

#nose {
  position: absolute;
  background: pink;
  border-radius: 70%;
  width: 10%;
  height: 10%;
  left: 22%;
  top: 40%;
}

#mouth {
  position: absolute;
  background: purple;
  width: 20%;
  height: 10%;
  left: 15%;
  top: 60%;
}

#body {
  width: 10%;
  height: 70%;
  left: 22%;
  top: 82%;
}

#rightArm {
  width: 8%;
  height: 55%;
  left: 15%;
  top: 82%;
}

#leftArm {
  width: 8%;
  height: 55%;
  left: 30%;
  top: 82%;
}


#rightEye {
  position: absolute;
  background: black;
  width: 10%;
  height: 25%;
  border-radius: 100%;
  right: 60%;
  top: 10%;
}

#leftEye {
  position: absolute;
  background: black;
  width: 10%;
  height: 25%;
  border-radius: 100%;
  left: 15%;
  top: 10%;
}

.bodyPart {
  position: absolute;
  background: black;
}

JavaScript

document.getElementById("rightArm").style.transform = "rotate(40deg)";
document.getElementById("leftArm").style.transform = "rotate(-40deg)";

var type = "nice";

document.getElementById("changeEyes").onclick = changeEyes;

function changeEyes() {
	if(type=="nice") {
  	document.getElementById("rightEye").style.backgroundColor = "red";
    document.getElementById("leftEye").style.backgroundColor = "red";
    document.getElementById("changeEyes").innerHTML = "Nice";
    type = "evil";
  }
  	else {
    	document.getElementById("rightEye").style.backgroundColor = "black";
    	document.getElementById("leftEye").style.backgroundColor = "black";
    	document.getElementById("changeEyes").innerHTML = "Evil";
      type = "nice";
  	}
}