Task

by Allie Yu

HTML

<div id="container"></div>

CSS

#container {
	margin: 0px auto;
}

.new-div {
  display: inline-flex;
  margin: 1.5%;
  color: white;
  background-color: black;
  cursor: pointer;
}

JavaScript

(function () {
  "use strict";
  const createDiv = () => {
    const boardDiv = document.createElement("div");
    boardDiv.className = "new-div";
    boardDiv.innerText = "Turning ON";
    return boardDiv;
  }

  const createDivs = () => {
    const board = document.getElementById("container");
    let myDivs = [],
      	i = 0,
      	numOfDivs = 10;

    for (i; i < numOfDivs; i++) {
      myDivs.push(createDiv());
      board.appendChild(myDivs[i]);
      myDivs[i].className = "new-div"
      myDivs[i].style.backgroundColor = "black"
    }
  }
  createDivs();
 
 const listener = () => {
    const userSelection = document.getElementsByClassName('new-div');
    for (let i = 0; i < userSelection.length; i++) {
      userSelection[i].addEventListener("click", () => {
        console.log("Clicked index: " + i);
        let backgroundColor = userSelection[i].style.backgroundColor
        if (backgroundColor == "black") {
        	userSelection[i].style.backgroundColor = "blue";
          userSelection[i].innerHTML = `Turning OFF ${i}`
        } else {
        	userSelection[i].style.backgroundColor = "black"
          userSelection[i].innerHTML = "Turning ON"
        }
      })
    }
  }
  listener();
}());