Вадим

e.changedTouches[0]

Так как у Вас может быть несколько тачей одновременно - это массив

К реакту Ваш вопрос не имеет отношения.
Array.prototype.find

[{id:1, name: test},
{id:2, name: test2},
{id:3, name: test3}].find(item => item.id === 2) // {id:2, name: test2}

/[a-zA-Z\s\.\,\!\?\-]/gm // - латиница

/[а-яА-ЯёЁ\s\.\,\!\?\-]/gm // - кирилица. Забыл в первой версии ответа большую Ё

Со знаками препинания и пробелом.

Обновил пару раз и показал мне тоже.
Это предупреждение о том, что Вы внутри цикла создаёте функцию, которая обращается на замыкание снаружи и в некоторых ситуациях может привести к неожиданному результату.

let panes = document.querySelectorAll('.pane');
for (let pane of panes) {
  pane.querySelector('.remove-button').addEventListener('click', onRemoveClick)
}

function onRemoveClick(evt){
	evt.target.closest('.pane').remove()
}

Вот так не будет предупреждения.

Не добавляется потому что нельзя в одном addEventListenerписать два события.
click touch

А анимацию с помощью @keyframes
css:

.active{
    animation-name: toggle;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

@keyframes toggle{
  50% {transform: scale(0.7)}
  100% {transform: scale(1)}
}

js:

leftBtn.addEventListener('click', (evt) => {
    leftBtn.classList.add('active')
    setTimeout(()=>{
      leftBtn.classList.remove('active')
    }, 300)
})

Вы хотя бы пытались гуглить?
Как называется плагин итоговых значений в параметрах в VS Code?

Потому что вы опирайтесь на событие нажатия клавиши. При вводе первой буквы значение в инпуте ещё не обновлено и = ''
Либо поменяйте событие c keydown на input, либо смотрите на event.key, а не inp.value.
Ну и про регистр Вам тоже верно сказали.

Вывод результата в консоль:

$('#favour_in .goods_icon-counter').html(mas.length - 1); // mas.length == 3.

Вы когда массив создаёте из строки, то делаете:
'|' + id +'|', а потом делаете .split('|')
Вот и получаются лишние элементы, потому что черта и перед id и после.

'|228|'.split('|') --> ['', '228', ''] // length - 3.

Inline Parameters

Гуглится по запросу: многоуровневое меню css.
Например:
https://ruseller.com/lessons.php?id=1442&rub=2

Вот бибилотека, с помощью которой это можно сделать: https://stuk.github.io/jszip/
А вот пример использования по Вашему запросу: https://gist.github.com/noelvo/4502eea719f83270c8e9

Вообще то есть нативная возможность без костылей выносить кнопку сабмита за форму.
htmlbook.ru/html/button/form
И не надо прикручивать никаких листенеров.

Так?

В одну строку через точку с запятой:

const usersTags = users.reduce((result, user) => result += user.tag+';' , '')

Вот набросок. Вам нужно доработать отслеживание разных range и разных чекбоксов. Так же можете поменять куда выводить, селекторы, способы обращения к элементам. Это всё на Ваш вкус.

Использовать селектор ~


Или создать модель в скрипте и по факту изменения значения в соответствующем инпуте генерировать разметку следующего вопроса и добавлять в dom.

TweenLite.defaultEase = Linear.easeNone;
var controller = new ScrollMagic.Controller();
var tl = new TimelineMax();
var pannelEffectsMap = {
  0: {xPercent: 100},
  1: {xPercent: -100},
  2: {yPercent: 100},
};
var panels = document.querySelectorAll('.panel');
panels.forEach(function(panel, index){
  if(index !== 0){
   var mapIndex = index % 3 // Так как в pannelEffectsMap только 3 "эффекта"
  tl.from(panel, 1, pannelEffectsMap[mapIndex]);		 
  }
})


new ScrollMagic.Scene({
  triggerElement: "#pinMaster",
  triggerHook: "onLeave",
  duration: "200%"
})
  .setPin("#pinMaster")
  .setTween(tl)
  .addIndicators({
  colorTrigger: "white",
  colorStart: "white",
  colorEnd: "white",
  indent: 40
})
.addTo(controller);