krcrawford/dom.html

## dom.html
<html>
  <head>
    <title>DOM Homework Page</title>
    <style>
      #rectangleWrapper {
        padding-top: 50px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 0;
      }
      .rect {
        height: 150px;
        width: 150px;
        display: block;
        position: relative;
        text-align: center;
      }
      #rect1 {
        background-color: #008000;
      }
      #rect2 {
        background-color: #A76F63;
      }
      #rect3 {
        background-color: #308694;
      }
      #rect4 {
        background-color: #6EDAF4;
      }
      #rect5 {
        background-color: #823B7B;
      }
      #rect6 {
        background-color: #CA1149;
      }
      #rect7 {
        background-color: #A12711;
      }
      #rect8 {
        background-color: #DADA55;
      }
      #rect9 {
        background-color: #6FF6FF;
      }
      #rect10 {
        background-color: #880002;
      }
    </style>
    <script>
      const ol = () => {
        console.log("Here are the reactangle IDs");
        const rects = document.getElementsByClassName("rect");
        for (let i = 0; i < rects.length; i++) {
          setTimeout(() => {
            console.log(rects[i].id);
          }, i * 400);
        }
      }
    </script>
  </head>
  <body onload="ol()">
    <h1>DOM Homework Page</h1>
    <h2>This page is the product of a homework exercise on pirple.com</h2>
    <div id="rectangleWrapper">
      <div id="rect1" class="rect">
      </div>
      <span>#008000</span>
      <div id="rect2" class="rect">
      </div>
      <span>#A76F63</span>
      <div id="rect3" class="rect">
      </div>
      <span>#308694</span>
      <div id="rect4" class="rect">
      </div>
      <span>#6EDAF4</span>
      <div id="rect5" class="rect">
      </div>
      <span>#823B7B</span>
      <div id="rect6" class="rect">
      </div>
      <span>#CA1149</span>
      <div id="rect7" class="rect">
      </div>
      <span>#A12711</span>
      <div id="rect8" class="rect">
      </div>
      <span>#DADA55</span>
      <div id="rect9" class="rect">
      </div>
      <span>#6FF6FF</span>
      <div id="rect10" class="rect">
      </div>
      <span>#880002</span>
    </div>
  </body>
</html>
	<html>
	<head>
	<title>DOM Homework Page</title>
	<style>
	#rectangleWrapper {
	padding-top: 50px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 0;
	}
	.rect {
	height: 150px;
	width: 150px;
	display: block;
	position: relative;
	text-align: center;
	}
	#rect1 {
	background-color: #008000;
	}
	#rect2 {
	background-color: #A76F63;
	}
	#rect3 {
	background-color: #308694;
	}
	#rect4 {
	background-color: #6EDAF4;
	}
	#rect5 {
	background-color: #823B7B;
	}
	#rect6 {
	background-color: #CA1149;
	}
	#rect7 {
	background-color: #A12711;
	}
	#rect8 {
	background-color: #DADA55;
	}
	#rect9 {
	background-color: #6FF6FF;
	}
	#rect10 {
	background-color: #880002;
	}
	</style>
	<script>
	const ol = () => {
	console.log("Here are the reactangle IDs");
	const rects = document.getElementsByClassName("rect");
	for (let i = 0; i < rects.length; i++) {
	setTimeout(() => {
	console.log(rects[i].id);
	}, i * 400);
	}
	}
	</script>
	</head>
	<body onload="ol()">
	<h1>DOM Homework Page</h1>
	<h2>This page is the product of a homework exercise on pirple.com</h2>
	<div id="rectangleWrapper">
	<div id="rect1" class="rect">
	</div>
	<span>#008000</span>
	<div id="rect2" class="rect">
	</div>
	<span>#A76F63</span>
	<div id="rect3" class="rect">
	</div>
	<span>#308694</span>
	<div id="rect4" class="rect">
	</div>
	<span>#6EDAF4</span>
	<div id="rect5" class="rect">
	</div>
	<span>#823B7B</span>
	<div id="rect6" class="rect">
	</div>
	<span>#CA1149</span>
	<div id="rect7" class="rect">
	</div>
	<span>#A12711</span>
	<div id="rect8" class="rect">
	</div>
	<span>#DADA55</span>
	<div id="rect9" class="rect">
	</div>
	<span>#6FF6FF</span>
	<div id="rect10" class="rect">
	</div>
	<span>#880002</span>
	</div>
	</body>
	</html>