Diems Animated Robot

From Chapter 5 of Writing Computer Code by Chris Minnick and Eva Holland.

by Diem Edixhoven

HTML

<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 id="message">I Love to Code!</p></div>
<div class="arm" id="leftarm"></div>
</div>

CSS

body {
    font-family: "Comic Sans MS", 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: black;
}
#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:center;
    padding-top: 30px;
}

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

}

JavaScript

// This is called a 'comment'
// It's here for you to read
// JavaScript doesn't care what you type in a comment.
// Put your code below to animate Douglas!



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

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

  function frame() {
  // the frame function makes animation frames.
    robotPart.style.top = top + '%';  
    // this line changes the position of the clicked part.
    
    top++;
    // this line adds 1 to the top variable.
    
    if (top === 20){
    // this checks the value of top and does the next thing
    // unless top is equal to 20.
    
      clearInterval(id);
      // This statement runs when top is equal to 20.
      // It stops the animation.
    }
  }
  
}


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);
    }
  }
}

var rightEye = document.getElementById("righteye");
rightEye.addEventListener("click", moveUpDown);

var leftEye = document.getElementById("lefteye");
leftEye.addEventListener("click", moveUpDown)

var leftArm = document.getElementById("leftarm");
leftArm.addEventListener("click", moveRightLeft);