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

В scss можно делать так в любом файле

.item {
  ...

  @media (max-width: 1040px) {
    ...
  }
}

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

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

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

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

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

В общем есть вариант собирать все итемы, брать высоту самого высокого контейнера и вешать всем

function setMinHeight(items) {
  const minHeight = Math.max(...items.map(item => item.offsetHeight));
  itemsArr.map(item => item.style.minHeight = minHeight);
}

const itemsArr = Array.from(document.querySelectorAll('общий селектор или селекторы'));
setMinHeight(itemsArr);

Квадратный блок на CSS можно достичь несколькими хаками, самый, как мне кажется простой - это сделать паддинг в 100% по высоте у псевдоэлемента. Есть еще вариант с подкладкой квадратного элемента свг и растягиванием по ширине контейнера, а контент делать абсолютным по отношению к родителю с свг, но псевдоэлемент проще

.elem {
  ...
  position: relative;
}

.elem::before {
  content: '';
  display: block; 
  height: 100%;
  padding-top: 100%;
}

Ну и реализация с свг и картинкой https://codepen.io/irodger/pen/ZydPoZ (изменяйте экран кодпена, чтоб убедиться в адаптивности квадрата)

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');

.parent {
  position: relative;
}

.children {
  position:  absolute; /* абсолютный относительно родителя, двигать по контейнеру родителя с помощью top, right, bottom, left */
}

Ну 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>

Gmail на мобилках игнорирует тег style и его содержимое, не говоря уж про импорт и шрифты, нужно поправить то, что осталось поправить, классы это конечно здорово, но как видите не везде срабатывает, атрибут style поможет зарешать проблему

А что вы хотите куда спредить и деструктурировать?
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