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  id= "inferior">
   <div id ="E"> </div>
   <div id ="F"> </div>
   <div id ="G"> </div>
   <div id ="H"> </div>
  </div>
    
     
      
 
  <div> 
    <p>I &lt;3 JS!</p>
  </div>
</div>

CSS

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

p {
  font-size: 6em;
}

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

#superior {
  width: 100%;
  height: 50%;
  border-radius: 1%;
  background-color: #e03ab4;
  position: absolute;
  left: 0%;
  top: 0%;
}

#A {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 25%;
  height: 100%;
  background-color:red; 
}

#B {
  position: absolute;
  left: 25%;
  top: 0%;
  width: 25%;
  height: 100%;
  background-color: yellow;
}

#C {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 25%;
  height: 100%;
  background-color: blue;
}

#D {
  position: absolute;
  width: 25%;
  height: 100%;
  left: 75%;
  top: 0%;
  background-color: #8d1e87;
}

#inferior {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 100%;
  height: 50%;
  background-color: #9925be;
  text-align: center;
  padding-top: 1px;
}

#E {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 25%;
  height: 100%;
  background-color: green;
}

#F {
  position: absolute;
  top: 0%;
  left: 25%;
  width: 25%;
  height: 100%;
  background-color: orange;
}
#G {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 25%;
  height: 25%;
  background-color: "pink";
}
#H {
  position: absolute;
  top: 0%;
  left: 75%;
  width: 25%;
  height: 100%;
  background-color: green; 
}

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";*/