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;
}


Leave a Reply