I'm currently in the process of constructing a grid with 20 rows and 20 columns of squares, but I am encountering difficulties with looping through table values to effectively create the grid.
For more detailed information on the html code, please see below:
Please refer to the comments for visuals on the setup.
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"> <tr> <td> </td> </tr> </table>
<script src="designs.js"></script>
</body>
table,
tr,
td {
border: 1px solid black;
}
tr {
height: 20px; //some how this is working as it's the same as
//td when i edit it the td gets edited aswell
width: 20px;
}
td {
height: 20px; //same as here
width: 20px;
}
const lTable = document.querySelector("pixelCanvas");
let height = document.querySelector("#inputHeight");
let width = document.querySelector("#inputWidth");
function makeGrid() {
//This is the main problem i can't figure out how to iterate the value
// to make the actual grid and give it the event listener
}