Some DOM confusion

[admit8490]

I am new to all this DOM stuff, so now I am trying to render some elements with vanilla JS for the learning purposes.

Right now I am trying to render bunch of div elements inside the section.
It described in the comments(lower part of code, BLOCK3).

I am trying to achieve this with some looping.

For some reason, I am rendering only last div, not all four of them.

I guess I don’t have understanding how this should work: I think I messed up with constants, or with assigning values to variables, or with understanding how createElement works - too much possible places where mistake could be.

Thus, need some direction.

const fullWidth = 'width: 100%;';
const borderForTesting = 'border: 1px solid black;';

/*BLOCK1
adding mainContainer inside the body, giving it some style*/

const mainContainer = document.createElement('div');
mainContainer.className = "main-container";
// mainContainer.style.width = '100%'
// mainContainer.style.height = '100vw';
// mainContainer.style.backgroundColor = '#A1A1A1';
//console.log(mainContainer);
mainContainer.style.cssText = 'width:100%; height:100vw; background-color:#A1A1A1'
//console.log(mainContainer);
document.body.insertBefore(mainContainer, document.body.firstChild);

/*BLOCK2
adding section with heading and description*/
const heroSection = document.createElement('section');
const mainHeading = document.createElement('h1');
mainHeading.innerText = 'First DOM sandbox';
const mainDescription = document.createElement('p');
mainDescription.innerText = 'messing around DOM in order to get practice';

mainContainer.appendChild(heroSection);
heroSection.appendChild(mainHeading);
heroSection.appendChild(mainDescription);

for (let child of heroSection.children) {
    child.style.cssText = 'text-align:center; font-family:Verdana';
}
// console.log(typeof(heroSection.children));//object

/*BLOCK3
3.1 >>> add 2nd section; is should be flex-containter
3.2 >>>inside it add 4 divs
each 100% width
each has different h2 heading; also color-coded differently
*/

// 3.1
const flexSection = document.createElement('section');
flexSection.style.cssText = `${fullWidth} display: flex`;
// console.log(flexSection.style);
mainContainer.appendChild(flexSection);

// 3.2
const divFlexItem = document.createElement('div');
const divHeading = document.createElement('h2');
const colorCode = [
    '#AAAAAA',
    '#BBBBBB',
    '#CCCCCC',
    '#DDDDDD',
]
const divHeadingsText = [
    'Clock sandbox',
    'Input/output sandbox',
    'Some sandbox',
    'Last sandbox'
]
// console.log(colorCode, divHeadings);


for (let idx = 0; idx < colorCode.length; idx++) {
    let newDiv = divFlexItem;
    // console.log(idx)
    // console.log(newDiv)
    newDiv.style.cssText = `background-color: ${colorCode[idx]}; ${fullWidth}`;
    let newDivHeading = divHeading;
    //TODO - make this css for headings variable
    newDivHeading.style.cssText = `text-align:center; font-family:Verdana`;
    newDivHeading.innerText = divHeadingsText[idx];
    flexSection.appendChild(newDiv);
    newDiv.appendChild(newDivHeading);    
    
}

[admit8490]

Nevermind, I was able to fix this:
removed this:

@admit8490

const divFlexItem = document.createElement('div');
const divHeading = document.createElement('h2');

And rewrote loop a little bit.

I guess I still have bunch of questions, but I’ll figure it out with more research.