Здравствуйте не могу понять условия задачи

Question

Напиши скрипт создания и очистки коллекции элементов. Пользователь вводит количество элементов в input и нажимает кнопку Создать, после чего рендерится коллекция. Нажатием кнопки Очистить, коллекция элементов очищается.

<div id="controls">
   <input type="number" min="1" max="100" step="1" />
   <button type="button" data-create>Create</button>
   <button type="button" data-destroy>Destroy</button>
</div>

<div id="boxes"></div>

Создай функцию createBoxes(amount), которая принимает один параметр – число. Функция создает столько <div>, сколько указано в amount и добавляет их в div#boxes.

Размеры самого первого <div> – 30px на 30px.
Каждый элемент после первого должен быть шире и выше предыдущего на 10px. Все элементы должны иметь случайный цвет фона в формате HEX. Используй готовую функцию getRandomHexColor для получения цвета.

function getRandomHexColor() {
   return `#${Math.floor(Math.random() * 16777215)
     .toString(16)
     .padStart(6, 0)}`;
}

Создай функцию destroyBoxes(), которая очищает содержимое div#boxes, таким образом удаляя все созданные элементы.

Answer 1

По задаче такая реализация.

const refs = {
  amountEl: document.querySelector('#controls input'),
  createEl: document.querySelector('button[data-create]'),
  destroyEl: document.querySelector('button[data-destroy]'),
  boxesEl: document.querySelector('#boxes')
}

function createBoxes(amount) {
  for(var i = 0; i < amount; i++) {
    var elem = document.createElement('div');
    
    elem.style.width = 30 + (10 * i)+'px';
    elem.style.height = 30+'px';
    elem.style.backgroundColor = getRandomHexColor();
    
    refs.boxesEl.append(elem);
  }
}

refs.createEl.addEventListener('click', function() {
  var amount = refs.amountEl.value;
  if(amount > 0) {
    createBoxes(amount);
  }
});

refs.destroyEl.addEventListener('click', function() {
  refs.boxesEl.innerHTML = '';
});


function getRandomHexColor() {
  return `#${Math.floor(Math.random() * 16777215)
    .toString(16)
    .padStart(6, 0)}`;
}

<div id="controls">
  <input type="number" min="1" max="100" step="1" />
  <button type="button" data-create>Create</button>
  <button type="button" data-destroy>Destroy</button>
</div>

<div id="boxes"></div>

БЛОГ НА HUSL

Здравствуйте не могу понять условия задачи

Ответы (1 шт):