Chapter 19 - Lemonade Stand - Start

Starting app for the Chapter 19 project in JavaScript for Kids For Dummies by Chris Minnick and Eva Holland

by wchristine

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>I &lt;3 JS!</p></div>
<div class="arm" id="leftarm"></div>
</div>

CSS

body {
    font-family: Arial;
}
p {
    font-size: 1em;
}
.eye {
    background-color:blue;
    width:20%;
    height:20%;
    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: 33%;
    top: 5%;
}
#righteye {
    position: absolute;
    left: 10%;
    top: 10%;
}
#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: LightPink;
}
#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:27%;
    height:5%;
}

JavaScript

document.getElementById("head").style.transform= "rotate(-15deg)";
document.getElementById("nose").style.borderRadius= "4px";
document.getElementById("rightarm").style.backgroundColor= "green";
var head =document.getElementById("head");
var  righteye=document.getElementById("righteye");
var  lefteye=document.getElementById("lefteye");
var  nose=document.getElementById("nose");
var  mouth=document.getElementById("mouth");
var  body=document.getElementById("body");
var  rightarm=document.getElementById("rightarm");
var  leftarm=document.getElementById("leftarm");
righteye.addEventListener("click",moveUpDown);

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