Chapter 7: MONDRIAN

The starting point for the Animated Robot project from Chapter 7 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland.

by rosakaufman

HTML

<div id="mondrian">
  <div id="superior">
    <div class="eye" id="A"></div>
    <div class="eye" id="B"></div>
    <div id="C"></div>
    <div id="D"></div>
  </div>
  <div class="arm" id="E"></div>
  <div id="inferior">
    <p>I &lt;3 JS!</p>
  </div>
  <div class="arm" id="F"></div>
</div>

CSS

superior {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

p {
  font-size: 6em;
}

.eye {
  background-color: blue;
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

.arm {
  background-color: #be2596;
  position: absolute;
  top: 45%;
  width: 5%;
  height: 40%;
}

#superior {
  width: 90%;
  height: 90%;
  border-radius: 25%;
  background-color: #e03ab4;
  position: absolute;
  left: 43%;
  top: 45%;
}

#A {
  position: absolute;
  left: 50%;
  top: 50%;
}

#B {
  position: absolute;
  left: 20%;
  top: 20%;
}

#c {
  position: absolute;
  left: 40%;
  top: 40%;
  width: 40%;
  height: 40%;
  background-color: black;
}

#d {
  position: absolute;
  width: 5%;
  height: 5%;
  left: 5%;
  top: 5%;
  background-color: #8d1e87;
}

#inferior {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 9%;
  height: 9%;
  background-color: #9925be;
  text-align: center;
  padding-top: 30px;
}

#F {
  position: absolute;
  left: 40%;
}

#leftarm {
  position: absolute;
  left: 70%;
  width: 65%;
  height: 60%;
}

JavaScript

document.getElementById("superior").style.backgroundColor = "#801ad9";
document.getElementById("B").style.transform = "rotate(-15deg)";
document.getElementById("C").style.borderRadius = "6px";
document.getElementById("D").style.border = "4px yellow dotted";
document.getElementById("F").style.backgroundColor = "#ff00ff";
document.getElementById("inferior").style.color = "#ff0000";
document.getElementById("head").style.borderTop = "8px black solid";
document.getElementById("D").style.borderRadius = "50%";
document.getElementById("F").style.backgroundColor = "#2eb00b";
document.getElementById("C").style.color = "#8d1e87";