Untitled

<!DOCTYPE html>
<html>
 <head>
   <title>My favorite colors</title>
   <link rel="stylesheet" href="style.css">
   <script src="rectangles.js">
   <meta charset="utf-8">
 </head>
 <body>
    <h1>My favorite colors</h1>
<h2>Some of my favorite colors are displayed below</h2>
<div id="rectangleWrapper">
  <div class="rect" id="first"><span>#FFD433</span></div>
  <div class="rect" id="second"><span>#4CFF33</span></div>
  <div class="rect" id="third"><span>#33FFEC</span></div>
  <div class="rect" id="fourth"><span>#339CFF</span></div>
  <div class="rect" id="fifth"><span>#3342FF</span></div>
  <div class="rect" id="sixth"><span>#FF4633</span></div>
  <div class="rect" id="seventh"><span>#B833FF</span></div>
  <div class="rect" id="eighth"><span>#FF33B8</span></div>
  <div class="rect" id="nineth"><span>#FF336E</span></div>
  <div class="rect" id="tenth"><span>#FF7A33</span></div>
</div>
<script>
  window.onload = () => {
    let rects = document.querySelectorAll('.rect');
    let result = '';
    for(rect of rects) {
      result += rect.id + ', ';

    }
    if(result[result.length-2] === ',') {
      result = ' ' + result.substr(0,result.length - 2)
    }
    console.log("Here are the rectangle IDs:" + result + '.')
  }
</script>
 </body>
</html>