Extra Credit Assignment 2

Event Listener

by jessupjs

HTML

<h1>
Extra Credit Assignment 2
</h1>
<main>
  <div id='theCanvas'></div>
  <div id='theInstructions'>Add an event listener that will allow you to "dot" constellations with chalk on the the blackboard when the mouse passes over.</div>
</main>

CSS

main {
  align-items: center;
  display: flex;
  flex-flow: row no-repeat;
  width: 100%;
  justify-content: space-between;
}

#theCanvas {
    cursor: crosshair;
    display: flex;
    flex-flow: column nowrap;
    height: 200px;
    margin-left: 5%;
    width: 200px;
}

.canvasRow {
    display: flex;
    height: 1px;
    flex-flow: row nowrap;
    width: 200px;
}

.pixel {
    height: 1px;
    width: 1px;
}

.pixel:nth-of-type(2n) {
    background-color: rgba(0, 0, 0, 0.9);
}

.pixel:nth-of-type(2n + 1) {
    background-color: rgba(0, 0, 0, 0.8);;
}

#theInstructions {
  color: red;
  font-size: 3.1vw;
  letter-spacing: 0.2rem;
  padding: 0 10%;
}

JavaScript

// 1. Get the blackboard element
var theCanvas = document.getElementById('theCanvas');

// 2. Add event listener that creates a behavior like chalk on a blackboard
theCanvas.addEventListener("mouseover", function(e) {
	e.target.style.backgroundColor = 'white';
});

// EVERYTHING BELOW IS READY

// Load the blackboard
load();

/*
	The function below, load(), is used to load the canvas element with 
    1px X 1px divs
*/

// Load the canvas w 1pxX1px divs
function load() {

  // Loop BigO( n^2:^( ) to create row divs and pixel divs
  for (let i = 1; i < 200; i++) {

    // To create row container
    var createRow = null;

    for (let j = 1; j < 200; j++) {

			// To create cell
      var createCell = null;

      if (j === 1) {
        createRow = document.createElement('div');
        theCanvas.appendChild(createRow);
        createRow.setAttribute('class', 'canvasRow');
        createCell = document.createElement('div');
        createCell.setAttribute('class', `pixel`);
        createRow.appendChild(createCell);
      } else {
        createCell = document.createElement('div');
        createCell.setAttribute('class', `pixel`);
        createRow.appendChild(createCell);
      }
    }
  }
}