I am having issues creating red and black divs

Question

my task is to use loops to display two color div. I need it to have 12 rows and 8 columns. and the position needs to be absolute.

I am new at coding so this is a beginning assignment that I would like to learn, but I can't figure out how to do.

This is what I have so far,

    for(var j = 0; j < i; j++){

    }
}

Typo and missing quotes in `redSq.style.position = absoulte;`. In addition, positioning all your divs with absolute will sit them all on top of each other. — j08691, May 04 '20 at 20:23
@j08691 I fixed it, but I was told to do the position absolute. Would you recommend doing it in a different way? — Richard G, May 04 '20 at 20:30
position: absolute - requires you to calculate the top and left position of each element. If you instead use display: flex; and set a width to each child, then they will "wrap" correctly — Salmin Skenderovic, May 04 '20 at 20:32
You can use absolute positioning, but you'll also need to change the placement of the divs are you render them, using either a combination of top/right/bottom/left, padding, margins, etc. — j08691, May 04 '20 at 20:32
It's difficult to do if you add each div as absolute..because you need to find and apply top and left position for each div... alternative way is define a wrapper div with 8*35 px width and height auto...and append your div to that wrapper div...and make your inner div's as inline-block — Mohammedshafeek C S, May 04 '20 at 20:41

score 0 · Accepted Answer · answered May 04 '20 at 20:41

JSFiddle: https://jsfiddle.net/Leyz1jgw/

Solution uses absolute positioning of <div>'s.

First, I defined a gen function, which creates a square of 35 by 35, at position (left, top) (top-left corner), and with background color color.

function gen(color, left, top)  {
    let redSq = document.createElement("div");   // my Div
    redSq.style.position = 'absolute';
    redSq.style.backgroundColor =  color;
    redSq.style.width = "35px" ;  // width
    redSq.style.height = "35px" ; // height
    redSq.style.left = left + 'px';
    redSq.style.top = top + 'px';
    document.body.appendChild(redSq);
}

Then, the looping goes like this: i determines the number of rows, j the number of columns.
The square in the i-th row (i is 0-based) will have i rows above it.

So, it should be at position 5 + i * (35 + 5) from the top, since the square has a side of 35 pixels, and the gap is supposed to be 5 pixels (including a starting gap).
Apply a similar logic for the horizontal positioning of the squares.

Now for the coloring: notice that for two consecutive (horizontal or vertical) squares, the colors are supposed to be different, and coincidentally, the sum i + j also changes parity accordingly. So color the square according to whether the sum is even or odd.

Here's the looping stuff:

for(i = 0; i < 12 ; i++){ //rows
    for(j = 0; j < 5; j++){ //columns
        let left = 5 + (j * 40); //positioning
        let top = 5 + (i * 40);
        if((i + j) % 2 == 0)  { //coloring
            gen('black', left, top);
        }  else  {
            gen('red', left, top);
        }
    }
}

score 0 · Answer 2 · answered May 04 '20 at 20:45

Using a single loop, you can use % modulus to determine if the cell is even/odd to turn it red/black and if its at the end of the row (8 cells) to create a new line.

    
for(var i = 0; i < 64 ; i++){ // foreloop
   
    var redSq = document.createElement("div");   // my Div
    redSq.style.backgroundColor =  (i % 2 == 0) ? "red" : "black";
    redSq.style.width = "35px" ;  // width
    redSq.style.height = "35px" ; // height
    redSq.style.margin = "5px";
    redSq.style.display = "inline-block";
    
    document.body.appendChild(redSq); // making sure the div appears
    
   if((i+1) % 8 == 0){
      document.body.innerHTML += "<br>";
   }
}

I am having issues creating red and black divs

2 Answers2