Та тут же сплошной хтмл с цсс

Мда. Ну если это не html и не CSS тогда что?)

ну на JS же)

🙈

Пхпхпп

С такой же идеей можно и на канвасе хреначить

Ну и вот по итогу)

Хоть канвас и так на жс делается

Так а в чем проблема то по итогу?

ну я имею введу создается через js все это, ручками html и css не пишем

как то это все в функцию бы запихать и передавать туда число  что бы он рисовал такою доску какое чисо было преданно

Делаешь функцию которая принимает размер доски и циклом рисуешь эти клетки 🤔

Можешь почитать про циклы и без проблем напишешь

Тем более вот он у тебя есть уже

спасибо большое  сейчас думать буду

function renderChess(n) {
  const chessWrap = document.createElement('div');
  chessWrap.style.display = 'flex'; /// Добавил флексы
  chessWrap.style.flexWrap = 'wrap';
  document.body.appendChild(chessWrap);

  const size = n * 20;
  chessWrap.style.width = `${size}px`;

  for (let i = 0; i < n; i++) {
     for (let j = 0; j < n; j++) {
        const item = document.createElement('div');
        item.style.height = '20px';
        item.style.width = '20px';
        if ((i + j) % 2 === 0) {
           //Формула отвечающая за чередование
           item.style.background = '#000';
        } else {
           item.style.background = 'red';
        }
        chessWrap.appendChild(item);
     }
  }
}

спасибо большее

Добавил ещё один параметр, чтобы можно было менять размер ячейки. Если не указывать, то будет 20px по-умолчанию.

function renderChess(n, w = 20) {
  const chessWrap = document.createElement('div');
  chessWrap.style.display = 'flex'; /// Добавил флексы
  chessWrap.style.flexWrap = 'wrap';
  document.body.appendChild(chessWrap);

  const size = n * w;
  chessWrap.style.width = `${size}px`;

  for (let i = 0; i < n; i++) {
     for (let j = 0; j < n; j++) {
        const item = document.createElement('div');
        item.style.height = `${w}px`;
        item.style.width = `${w}px`;
        if ((i + j) % 2 === 0) {
           //Формула отвечающая за чередование
           item.style.background = '#000';
        } else {
           item.style.background = 'red';
        }
        chessWrap.appendChild(item);
     }
  }
}

Всем привет! :)

🖐