Как оптимизировать данный код?

Question

[Иван Симонов]

Добрый день
Есть код - Fiddle
Подскажите, как оптимизировать данный код?

Answer 1

[0xD34F]

const form = document.querySelector('.form');
const items = [...form.querySelectorAll('.form__item')];

form.addEventListener('change', function(e) {
  const index = items.indexOf(e.target.closest('.form__item'));
  form.querySelector('.form__progress-line').style.width = (index + 2) * 100 / items.length + '%';

  setTimeout(() => {
    items[index]?.classList.remove('form__item--active');
    items[index + 1]?.classList.add('form__item--active');

    if (index + 1 === items.length) {
      form.style.display = 'none';
      document.querySelector('.result').classList.add('result--active');
    }
  }, 1000);
});

form.dispatchEvent(new Event('change'));

Answer 2

[Дмитрий]

Пространства для оптимизации здесь не сильно много, но например вот так

(function() {

  'use strict';

  const formItems = document.querySelectorAll('.form .form__item');
  const formRadios = formItems.forEach(item => item.querySelectorAll('.form__label'))

  const formProgressLine = document.querySelector('.form .form__progress .form__progress-line');
  const formProgressStart = 100 / formItems.length;
  const result = document.querySelector('.result');

  setTimeout(() => {
    formProgressLine.style.width = `${formProgressStart}%`;
  }, 0);

  formRadios.slice(0, 2).forEach((formRadio, formRadioIndex) => {
    formRadios.forEach(radio => {
      radio.addEventListener('click', () => {
        setTimeout(() => {
          formItems[formRadioIndex].classList.remove('form__item--active');
          formItems[formRadioIndex + 1].classList.add('form__item--active');
        }, 1000);
        formProgressLine.style.width = `${formProgressStart * (formRadioIndex + 2)}%`;
      });
    });
  })

  formRadios[2].forEach(radio => {
    radio.addEventListener('click', () => {
      setTimeout(() => {
        form.style.display = 'none'
        result.classList.add('result--active');
      }, 1000);
    });
  });
})();