I'm working on building an interactive grid that is similar to an Etch-a-Sketch. I have my grid set up and am now trying to set up a “hover” effect so that the grid divs change color when your mouse passes over them, leaving a (pixelated) trail through your grid as a pen would. But I want the color to change based on the button clicked; ie black button leaves a black trail when you hover and rainbow leaves a rainbow trail and reset clears the grid.
<head>
<title> Claudias Etch-A-Sketch</title>
<link rel= "stylesheet" href="style.css">
</head>
<body>
<section class="black">
<h1><center> Claudia Etch-A-Sketch!</center></h1>
</section>
<section>
<div class="buttons">
<button id="rainbow">Rainbow</button>
<button id="black">Black</button>
<button id="reset">Reset</button>
</div>
</section>
<section>
<div id="container"> </div>
</section>
</body>
<script src="javascript.js"></script>
const container = document.getElementById("container");
const btnReset = document.getElementById("reset");
const btnBlack = document.getElementById("black");
const btnRainbow = document.getElementById("rainbow");
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "grid-item";
};
};
makeRows(16, 16);
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
height: 30px;
width: 30px;
border: 1px solid #ddd;
text-align: center;
}
.black {
background-color: black;
}
h1 {
color: white;
}