Алексей Уколов

const items = filteredProducts.filter((product) => product.category === "Some, category");

return (
    <div className="products-list">
        <Title title="Some Title" />
        <div className="products-container">
            <p>{items.length}</p>
        </div>
        <div className="products-container">
            {items.map((product) => (
                <ProductCard
                    key={product.id}
                    product = {product}
                />
            )}
        </div>
    </div>
);

Потому что, внезапно, forEach - это не то же самое, что reduce. Метод forEach используется исключительно для итерирования, а reduce для получения какого-то результата, поэтому forEach ничего не возвращает.

Вам нужен метод map:

var bisOne = [1,2,3,4,5].map(function(e){return e*10});

Если очень хочется сделать это при помощи forEach, то должно быть так:

var bisOne = [1,2,3,4,5];
bisOne.forEach(function(e,i,arr){arr[i]=e*10});

.then( response => console.log(response.now_dt) )
Вы ничего не возвращаете из функции, вот дальше по цепочке и undefined. Уберите вообще этот then и всё заработает.

P.S. Мешать вместе async/await и then/catch без веской на то причины несколько странно.

Elm

/\/(\d+)$/

Да.

Можно подделать.

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

Вот так должно быть понятнее:

setDelay = param => {
  setTimeout(() => console.log("выполнен", param), param*1000)
}

for(var i = 0; i < 10; i++) {
  setDelay(i);
  console.log("установлен", i);
}

Если же вы хотите устроить именно "лесенку", код будет сложнее:

setDelay = async (param) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("выполнен", param);
      resolve();
    }, param * 1000);
  })
}

for(var i = 0; i < 10; i++) {
  console.log("установлен", i);
  await setDelay(i);
}

Без костылей с пробелами:

$("#who").on("keyup", function() {
  var searchText = $(this).val().toLowerCase() || "___";
  
  $("#poisk > div").each(function() {
    var elem = $(this);
    
    if (elem.text().toLowerCase().indexOf(searchText) !== 0) {
      elem.addClass("hidden");
    } else {
      elem.removeClass("hidden");
    }
  });
});

Скрипты между собой никак не конфликтуют, просто у вас первый скрипт кривой.
При клике на ссылку вида

<a href="#">Раз я никуда не веду, я должна быть кнопкой, а не ссылкой</a>

, выражение $($.attr(this, 'href')).offset().top превращается в $('#').offset().top и jQuery не знает что с этим делать.

Даже есть вы не можете редактировать оригинальный css, вы всегда можете добавить свой:

var css = '.elem-hover { background: blue; }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

document.querySelector('.elem').classList.add('elem-hover');

Разумеется, это сломается, когда изменятся оригинальные стили и нужно будет обновить код в соответствии с ними.

document.querySelector(".left").appendChild(ball);

Метод getElementsByClassName возвращает коллекцию элементов, даже если он на странице один. У коллекции, соответственно, нет метода appendChild.

Вот в этот:

var target = ... roots ...;
 
target.push({
    value: item
});

У вас id в коде и в разметке не совпадают, плюс код не отформатирован нормально, плюс имена переменных бессмысленные. Поэтому очень сложно понять как это всё должно работать.

Но, судя по всему, вы всплытие останавливаете на родительском элементе, когда уже поздно. На дочерний вы даже обработчиков никаких не ставите.

Должно быть как-то так:

document.getElementById('z1').addEventListener('click', function (event) {
  event.stopPropagation();
});

var parent = document.getElementById('s1');
parent.addEventListener('click', function (event) {
  parent.style.display = "none";
});

В условиях равно должно быть двойным/тройным. Одинарное равно - это присваивание, а не сравнение.

if (
  document.getElementById('apple').style.display == 'none' &&
  document.getElementById('shoe').style.display == 'none' &&
  document.getElementById('book').style.display == 'none' &&
  document.getElementById('purse').style.display == 'none'
) {
   document.getElementById('begin').style.display = 'none';
}

Кроме того, такая механика вообще не будет работать - ваше условие вызовется один раз при загрузке страницы и никакие последующие изменения его не заставят сработать. Вам нужно вынести эту логику в функцию и добавить её вызов в каждый обработчик клика.

arr.sort((a, b) => a.pos ? 1 : (b.pos ? -1 : 0))

let arrayFirst = [2, 5, 8, 1];
let arraySecond = [
{id: 34, name: 'test'}, 
{id: 5, name : 'test1'}, 
{id: 123, name: 'test2'}
];

// Если нужны все
const all = arraySecond.filter((y) => arrayFirst.includes(y.id));

// Если только первое совпадение
const first = arraySecond.find((y) => arrayFirst.includes(y.id)));

$(#event-date_start)
В кавычки селектор обернуть забыли (дважды) и браузер думает, что это обращение к приватному свойству, которые ещё не приняты в стандарт и не реализованы браузером.

Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

https://getbootstrap.com/docs/4.2/components/navs/...