My makeRows function isn't working as I would expect, I'm not sure if I'm going about this the right way. When I press "clear all" the prompt runs to make new rows and columns but the mouseOver class isn't being added back to the whole grid, only the bottom part.
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty("--grid-rows", rows);
container.style.setProperty("--grid-cols", cols);
for (c = 0; c < rows * cols; c++) {
const cell = document.createElement("div");
container.appendChild(cell).className = "grid-item mouseOver";
}
}
window.onload = makeRows(16, 16);
const btn = document.querySelector("button");
const div = container.getElementsByTagName("div");
function reset() {
[].forEach.call(div, function (el) {
el.classList.remove("mouseOver");
});
let num = prompt("How many rows and cols?");
makeRows(num, num);
}
btn.addEventListener("click", reset);: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 {
padding: 1rem;
border: 1px solid #ddd;
text-align: center;
}
.mouseOver {
transition: 0s 10s;
}
.mouseOver:hover {
background-color: aqua;
transition: 0s;
}
#btn {
max-width: 100%;
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Etch-A-Sketch</title>
<link rel="stylesheet" href="etch.css" />
</head>
<header>
<button id="btn">Clear All</button>
</header>
<body>
<div id="container"></div>
</body>
<footer>
<script src="etch-script.js"></script>
</footer>
</html>