I created a grid using HTML, CSS & JavaScript inspired by the code provided in response to a question on Stack Overflow about Creating a 16x16 grid using JavaScript. My challenge now is assigning classes to individual squares and verifying if it was done correctly. Ideally, I'd like to click on a square and have it log which specific square it is.
I attempted to add the following code snippet to my JavaScript file, but I'm uncertain about its functionality.
cell.classList.add('cell');
cell.id = 'cell-${c}'
Code Snippet (attribution: Nidhin Joseph)
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++) {
let cell = document.createElement("div");
cell.innerText = (c + 1);
container.appendChild(cell).className = "grid-item";
};
};
makeRows(16, 16);:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 1em;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1em;
border: 1px solid #ddd;
text-align: center;
}<div id="container">
</div>