Home When i run the code above nothing shows up on my webpage and I'm wondering why my goal is to make a 7×7 checkboard

Questions

When i run the code above nothing shows up on my webpage and I'm wondering why my goal is to make a 7×7 checkboard

February 24, 2023

Im not too sure what i’m doing wrong here i tried running this through chatgpt and it said it should but still nothing when i run it the page is left completely blank i would try another option but it’s just stranfe that nothing works at all

/*for (let i = 0; i < 49; i++) {
  const createDivs = document.createElement('div');
  document.body.appendChild(createDivs);
  if (i % 2 === 0) {
    createDivs.classList.add('set-to-black');
  } else {
    createDivs.classList.add('set-to-red');
  }
}

const setToBlack = document.getElementsByClassName('set-to-black');
for (let i = 0; i < setToBlack.length; i++) {
  setToBlack[i].style.backgroundColor = 'black';
  setToBlack[i].style.height = '60px';
};

const setToRed = document.getElementsByClassName('set-to-red');
for (let i = 0; i < setToRed.length; i++) {
  setToRed[i].style.backgroundColor = 'red';
   setToRed[i].style.height = '60px';
};*/

>Solution :

Uncomment your code, remove the lines that sets the height then add just a tiny bit of CSS and you’re there. Fully annotated example below.

for (let i = 0; i < 49; i++) {
  const createDivs = document.createElement('div');
  document.body.appendChild(createDivs);
  if (i % 2 === 0) {
    createDivs.classList.add('set-to-black');
  } else {
    createDivs.classList.add('set-to-red');
  }
}

const setToBlack = document.getElementsByClassName('set-to-black');
for (let i = 0; i < setToBlack.length; i++) {
  setToBlack[i].style.backgroundColor = 'black';
  /*setToBlack[i].style.height = '60px'; removed this so the divs are square */
};

const setToRed = document.getElementsByClassName('set-to-red');
for (let i = 0; i < setToRed.length; i++) {
  setToRed[i].style.backgroundColor = 'red';
   /*setToRed[i].style.height = '60px'; removed this so the divs are square*/
};

div {
  width: calc(100% / 7); /* make each div 1/7th of the overall width so the 8th, 16th, etc start on a new linw */
  display: inline-block; /* make them behave like inline block elements so siblings elements sit next to each other */
  vertical-align: top; /* this removes the space for descenders */
  aspect-ratio: 1 / 1; /* make them all square */
}