Роман Дворянов

Попробуй в css добавить проверку на hover для элемента списка, мобилки часто ловят ховер перед кликом

@media (hover: hover) {
  .swatch__list--item:hover .swatch__tooltip {
      top: -33px;
      opacity: 1;
      visibility: visible;
  }
}

Про медиазапрос hover можно почитать тут - https://developer.mozilla.org/en-US/docs/Web/CSS/@...

Функция не ждет, вы добавляете к HTML еще один span, а не меняете его на свой.
Поменяйте += на =

then(() => {
  elem.innerHTML = '<span class="success"...

В 3 строке компилятор не понял написанной конструкции и предположил, что вы объявили Header как неприсвоенную константу, а после нее анонимная функция, поэтому предположил, что это не наследование, а перечисление констант и предложил поставить запятую после Header, но в вашем случае вы не написали знак присвоения (равно) для константы Header анонимной функции.
const Header = () => {…}

Если добавить еще один слушатель событий на документ, то можно закрывать при условии, что меню открыто:

function closeBurger() {
  if (menu.classList.contains("active")) {
    toggleMenu();
    toggleToggle();
  }
}

document.addEventListener('click', closeBurger, false);

Команда echo не запускает скрипты, она выводит текстом все что в нее всунуто.
Т.е. максимум, при исправлении ошибок синтаксиса, в вашем примере вы получите код js написанный в виде текста, например на странице или в консоли или где вы запускаете этот php, для того, чтоб код сработал, вам нужно выйти за рамки php , например -

<?php 
  $kakoyto_php_kod = '100%';
  echo "Hello world, Im php" ;
?>
<script type="text/javascript">
    $(document).mouseup(function () {
        $('.header__burger').click(function (e) {
          e.preventDefault()
          $('.header__nav').toggleClass('header__nav--active')
        })
    })
    $(document).mouseup(function (e) {
        var $target = $(e.target)
        if ($target.closest('.header__menu').length == 0) {
          $('.header__nav').removeClass('header__nav--active')
        }
    })
    </script>
<?php 
  $ostalnoy_php_kod;
?>

Если я все верно понял, поискав инфу на странице плагина gulp-connect, то релоад смотрит на изменениях в конечном html файле, соответственно его нужно ставить после компиляции/изменения файла в конечной папке

Вообще я не сторонник таких частых запросов на сервер по нажатию каждой кнопки, некоторые вешают таймаут в 2-3 секунды и только потом отправляют.

У вас перезаписывается значение инпута, нужно его дополнять.

Замените это
$('#tags').val($(this).text());

на это
$('#tags').val($('#tags').val() + $(this).text());

Курсор вероятно всего встанет на нужное место, если нет, то вот тут можно подсмотреть костыль

document.addEventListener('DOMContentLoaded', () => {
  const policy = document.getElementById('policy');
  const policyReplaced = 'policy_confirm'.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,'\\$1');
  const regExp = new RegExp(`(?:^|;)${policyReplaced}=([^;]*)`);
  const cookie = document.cookie.match(regExp);

  if (cookie[1] === 'Y') {
    policy.remove()
    return;
  }

  const policy_box = document.querySelector('div.policy-container');

  if (policy_box) { 
    return;
  }

  const confirmButton = '<a href="javascript:void(0)" class="policy-confirm"><?php echo $text_btn_privacy; ?></a>';
  policy_box.innerHTML = `
    <div class="policy-text">
      <?php echo ${!navigator.cookieEnabled ? '$text_privacy_enabled;' : '$text_privacy;'} ?>
    </div>
    <a href="javascript:void(0)" class="policy-confirm"><?php echo $text_btn_privacy; ?></a>
    ${navigator.cookieEnabled && confirmButton || ''}
  `;

  setTimeout(() => {
    policy.appendChild(policy_box);
    policy.classList.add('active');

    setTimeout(() => policy.classList.add('activated'), 400);

    const policy_confirm = document.querySelector('.policy-confirm');

    policy_confirm && policy_confirm.addEventListener('click', () => {
      policy.classList.remove('activated');
      setTimeout(() => policy.remove(), 300);
      document.cookie='policy_confirm=Y; path=/'
    })
  },100)
})

Открываем рубрику ответы на некровопросы

const replcaeWithSpan = (item, searchWord) => {
  if (!searchWord) return;

  item.innerHTML = item.innerText.replace(searchWord, `<span>${searchWord}</span>`);
}

const item = document.querySelector('.item');
replcaeWithSpan(item, 'test');

Ну NaN это очевидно) Not A Number, что указывает о том, что когда вы удаляете все цифры, в вашем инпуте нет ожидаемого числа, пустая строка в инпуте не является числом, лечится value = value.replace(/\D/, 0);

А удаление - когда вы вводите число в инпут ручками у вас не применяется форматирование, и там остается число, что позволяет легко удалить последний символ у любого числа, когда вы дергаете ползунок, ваши числа магическим образом (нет) становятся строкой вида '1 000', соответственно парсер( parseInt(el.value) ) парсит строку и получает 1 (введите в консоли parseInt('1 000') например), парсер отсекает все после пробела, т.е. по факту он убирает все после символа, который невозможно сделать числом

Вы вызываете функцию, а нужно присваивать вызов функции к слушателю событий

<button class="btn_access func-during" onclick="() => applyFilters()">Подобрать</button>

или

<button class="btn_access func-during" onclick="function(){ applyFilters() }">Подобрать</button>

или

<button class="btn_access func-during" onclick="applyFilters">Подобрать</button>

А что вы хотите куда спредить и деструктурировать?
const [...{name:name}] = data;
Здесь вы пытаетесь создать массив с именем переменной... тут нет имени переменной для массива,
Но если вы дернете без спреда,
const [{name: name}] = data;
то вам вернется значение поля name из первого элемента массива и запишется в переменную name, даже не объект, т.к. в данном случае([{name: name}]) происходит операция присваивания переменной 'name' значением поля 'name' из массива объектов, что на выходе даст строку с первым значением этого поля.

Вам нужен новый массив с ключами и значениями из другого массива, так? Это делается так -

const data=[
  {id:1, name:"ganna",age:15},
  {id:2, name:"anna",age:16},
  {id:3, name:"petro",age:54}
];

const arr = Object.values(data).map(item => [{ name: item.name }]); // Массив массивов с объектами
const arr2 = Object.keys(data).map(() => []); // Массив пустых массивов, чтоб можно было пушнуть элементы в 
                                              // массив. Еще можно так Array.from(data).fill([]);

Object.values(data).map((item, index) => arr2[index].push({ name: item.name }));

console.log(arr);
//=> [
//    [{name: 'ganna'}],
//    [{name: 'anna'}],
//    [{name: 'petro'}]
//. ]

console.log(arr2);
//=> [
//    {name: 'ganna'},
//    {name: 'anna'},
//    {name: 'petro'}
//. ]

Используйте position: sticky с top: 0 и bottom: 0; js тут не нужен. Для старых браузеров можно поискать полифил в интернетах. Форк вашего кода с решением со стики https://codepen.io/irodger/pen/eYJwxKx

Кстати, если вы не используете какой-нибудь из css препроцессоров, то эти строчки так не работают

#aside-fixed {
  width: 150px;
  position: relative;
  height: 100%;
  @media screen and (max-width: 1024px) {
    display: none;
    height: 0;
  }
}

В ванильном CSS надо так

#aside-fixed {
  width: 150px;
  position: relative;
  height: 100%;
}

@media screen and (max-width: 1024px) {
  #aside-fixed {
    display: none;
    height: 0;
  }
}

Перенесите подключние скрипта из head в body, если скрипт использует jquery, то после jquery