Pixel art? 2x2 grid first

JavaScript
1

https://codepen.io/rstorms/pen/rZjOJB

Currently, I’m trying to make a 2x2 grid with divs. What am I doing wrong?

3

Why are you giving your divs the same id and class? That’s… a little unusual.

Anyway, in my (Chrome) Dev Tools I get the following error

Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’

so the browser is telling you you are trying to work with something that is not of type Node. Note that you are trying to append the string ‘cell’, not the variable cell. Changing it to the node instead of the string may fix this, but there’s more to say.

You start with your first cell inside the grid, then your for loops go over all four of the cells you want to add, meaning you would have 5 in total! (Well, more since you call it once on the outer loop, then twice on the inner, then another time on the outer loop and two more times on the inner loop on top of the starting one!)

Since you want to use JavaScript and nodes, it may be easier to just start from scratch there. I.e., start with

const grid = document.createElement('DIV');
const cell = document.createElement('DIV');
// add the classes or IDs you want to these
// add grid to the page
for (rows) {
  for (colums) {
    grid.appendChild(cell);
  }
}

You will also need more CSS to ensure they display in a grid and not just in a column.