Author: paula

Move the mouse over the panel above to play with a new etch a sketch. Refresh the page to reset (rather than shaking!)

Javacript Code:

function getRandColor () {
  let colorObj = {};
  colorObj.color1 = Math.floor(Math.random() * 256);
  colorObj.color2 = Math.floor(Math.random() * 256);
  colorObj.color3 = Math.floor(Math.random() * 256);
  return colorObj;
}
let theSection = document.querySelector(".code-container");

theSection.addEventListener("mousemove", event => {
  let randomColor = getRandColor();
 
  let node = document.createElement("div");
  node.style.top = `${event.offsetY}px`;
  node.style.left = `${event.offsetX}px`;
  node.style.backgroundColor =     `rgb(${randomColor.color1},${randomColor.color2},${randomColor.color2})`;

theSection.appendChild(node);
});

CSS code:

.code-container {
  height : 400px;
  background : beige;
}

.code-container div {
  position: absolute;
  border-radius: 4px;
  height: 8px;
  width: 8px;
  background-color: red;
}