JSFiddle - React, Tailwind, and code Playground

by ivar vandenbosch

HTML

<div>Hoi</div><div>Plusklas</div>
<div>Hoe</div><div>Gaat het</div><div>Met jullie</div>
<div>Goed o oke</div>
<div>Kijk</div>
<div>Eens</div>
<div>Wat</div>
<div>Zie je </div>
<div>???</div>
<div id="robot">
<div id="head">
   <div class="eye" id="righteye"></div>
   <div class="eye" id="lefteye"></div>
   <div id="nose"></div>
   <div id="mouth"></div>
</div>
<div class="arm" id="rightarm"></div>
<div id="body"><p>Doei plusklas!</p></div>
<div class="arm" id="leftarm"></div>

<div>ja </div>
<div>ik kan </div>
<div>een robot</div>
<div>bouwen</div>

<div>Vraag aan</div>
<div>Ivar</div>
<div>Of hij</div>
<div>Iets wil</div>
<div>veranderen</div>

CSS

body {
   font-family: "Arial", cursive, sans-serif;
}
p {
   font-size: 3em;
}
.eye {
   background-color:blue;
   width:30%;
   height:30%;
   border-radius: 50%;
}
.arm {
   background-color: #cacaca;
   position: absolute;
   top: 35%;
   width: 5%;
   height: 40%;
}

#head {
   width:30%;
   height:30%;
   border-radius: 15%;
   background-color: #dadada;
   position: absolute;
   left: 32%;
   top: 5%;
}
#righteye {
   position: absolute;
   left: 20%;
   top: 20%;
}
#lefteye {
   position: absolute;
   left: 60%;
   top: 20%;
}
#nose {
   position: absolute;
   left: 45%;
   top: 50%;
   width: 10%;
   height: 10%;
   background-color: lime;
}
#mouth {
   position: absolute;
   width: 65%;
   height: 15%;
   left: 20%;
   top: 70%;
   background-color: red;
}
#body {
   position: absolute;
   left: 25%;
   top: 35%;
   width: 45%;
   height: 55%;
   background-color: #dadada;
   text-align:hoi plusklas;
   padding-top: 30px;
}

#rightarm {
   position:absolute;
   left:20%;
}
#leftarm {
   position: absolute;
   left: 70%;
   width: 30%;
   height: 7%;
}

JavaScript

$('div').hide(/div).seq(function(done) {
   $(this).fadeIn(done);
});
var rightEye = document.getElementById("righteye");
var leftEye = document.getElementById("lefteye");
var leftArm = document.getElementById("leftarm");

rightEye.addEventListener("click", moveUpDown);
leftEye.addEventListener("click", moveUpDown);
leftArm.addEventListener("click", moveRightLeft);
rightArm.addEventListener("click",moveRightLeft);

function moveUpDown(e) {
 var robotPart = e.target;
 var top = 0;

 var id = setInterval(frame, 10) // draw every 10ms

 function frame() {
   robotPart.style.top = top + '%';    
   top++;
   if (top === 20){
     clearInterval(id);
   }
 }

}


function moveRightLeft(e) {
 var robotPart = e.target;
 var left = 0;
 var id = setInterval(frame, 10) // draw every 10ms
 function frame() {
   robotPart.style.left = left + '%';
   left++;
   if (left === 70){
     clearInterval(id);
   }
 }
}