Kipsi

el.addEventListener('click', () => {
    const value  =  !localStorage.getItem('isOpen')
    localStorage.setItem('isOpen', value)
})

const createKeyGenerator = (groupSize, groupCount) => {
    const dictionary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    const length = groupSize * groupCount;

    return () => {
        const values = new Uint32Array(length);
        crypto.getRandomValues(values);

        const chars = [...values].map(value => dictionary[value % dictionary.length]);
        const key = new Array(groupCount)
            .fill(null)
            .map((_, index) => {
                const offset = index * groupSize;

                return chars
                    .slice(offset, offset + groupSize)
                    .join('');
            })
            .join('-');

        return key;
    };
};

const createKey = createKeyGenerator(4, 3);

console.log(createKey()); // FO4V-P2ZV-JYH4
console.log(createKey()); // TTMR-EBVC-8TUW

const createKeyGenerator = (groupSize, groupCount) => {
    const dictionary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    const length = groupSize * groupCount;
    const group = new RegExp(`.{${groupSize}}`, 'g');

    return () => {
        const values = new Uint32Array(length);
        crypto.getRandomValues(values);

        const chars = [...values].map(value => dictionary[value % dictionary.length]);
        const key = '_'
            .repeat(length)
            .replace(/\w/g, (match, index) => chars[index])
            .match(group)
            .join('-');

        return key;
    };
};

function showSlide(id) {
    fullPhoto.src = arr[id].src;
    descPhoto.textContent = arr[id].desc;
}

thumbnail.addEventListener('click', function () {
    return showSlide(this.dataset.id)
}

window.addEventListener('load', () => {
  let current = 0;
  let max = thumbnails.length - 1;
  setInterval(() => {
     fullPhoto.src = thumbnails[current].getAttribute('src');
     current = current < max ? current + 1 : 0;
	}, 1000);
})

<div class="item" data-type="only">
  <h2>Выбрать все категории</h2>
  ...
</div>
<div class="item" data-type="one">
  <h2>Выбрать пол</h2>
  ...
</div>
<div class="item" data-type="multiple">
  <h2>Выбрать тип одежды</h2>
  ...
</div>

const containerSelector = '.filter';
const itemSelector = `${containerSelector} .item`;
const baseBtnSelector = 'button';
const btnSelector = `${itemSelector} ${baseBtnSelector}`;
const btnOnlySelector = `${itemSelector}[data-type="only"] ${baseBtnSelector}`;
const activeClass = 'active';

document.addEventListener('click', ({ target: t }) => {
  const button = t.closest(btnSelector);
  if (button) {
    const toggle = n => n.classList.toggle(activeClass, n === button);
    const item = button.closest(itemSelector);
    const { type } = item.dataset;

    item
      .closest(containerSelector)
      .querySelectorAll(type === 'only' ? btnSelector : btnOnlySelector)
      .forEach(toggle);

    if (type === 'multiple') {
      button.classList.toggle(activeClass);
    } else if (type === 'one') {
      item.querySelectorAll(btnSelector).forEach(toggle);
    }
  }
});