0xD34F

погуглил за вас

Вычитайте нижнюю границу везде, где рассчитываете проценты. Например, вместо

range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";

должно быть

range.style.left = ((minPrice - rangeInput[0].min) / (rangeInput[0].max - rangeInput[0].min) * 100) + '%';

Функция суммирования:

function sum(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let result = 0;

  for (const n of data) {
    result += getVal(n);
  }

  return result;
}

У формы надо слушать событие change:

const form = document.querySelector('form');
const result = form.querySelector('.result');
form.addEventListener('change', onChange);
form.dispatchEvent(new Event('change'));

Как может выглядеть обработчик:

function onChange() {
  result.textContent = sum(
    this.querySelectorAll(':checked'),
    n => +n.getAttribute('rel')
  );
}

// или

function onChange(e) {
  result.innerText = sum(
    e.currentTarget.elements,
    n => n.attributes.rel.value * n.checked
  );
}

Сразу определим селекторы элементов и класс, они нам дальше понадобятся:

const blockSelector = 'селектор блоков';
const buttonSelector = 'селектор кнопок';
const activeClass = 'класс, показывающий блок';

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

const blocks = document.querySelectorAll(blockSelector);
const buttons = document.querySelectorAll(buttonSelector);

buttons.forEach((n, i) => {
  n.addEventListener('click', () => {
    blocks[i].classList.toggle(activeClass);
  });
});

Кстати, создавать отдельные обработчики клика для каждой из кнопок не обязательно, можно сделать один общий. Как при этом получать индексы? - их можно прицепить прямо к кнопкам. Например, в виде data-атрибута:

const onClick = function({ currentTarget: { dataset: { index } } }) {
  this[index].classList.toggle(activeClass);
}.bind(document.querySelectorAll(blockSelector));

document.querySelectorAll(buttonSelector).forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', onClick);
});

Также есть вариант вычислять индекс при клике:

const blocks = document.querySelectorAll(blockSelector);
const buttons = document.querySelectorAll(buttonSelector);

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(buttons, this);
  blocks[index].classList.toggle(activeClass);
}

А вообще, если у каждой из пар кнопка-блок есть отдельный общий предок (const containerSelector = '...';), то индексы не нужны. Достаточно от нажатой кнопки подняться до общего предка кнопки и блока, и найти внутри блок (а можно даже и не искать, если добавлять класс контейнеру; конечно, стили придётся в этом случае немного изменить, вместо .блок.класс будет .контейнер.класс .блок):

const toggleBlock = button => button
  ?.closest(containerSelector)
  ?.querySelector(blockSelector)
  .classList
  .toggle(activeClass);


// можно добавить обработчик клика каждой кнопке индивидуально
document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggleBlock(e.currentTarget));

// или один раз на всю страницу
document.addEventListener('click', e => {
  toggleBlock(e.target.closest(buttonSelector));
});

<card-item :title="Неработающий заголовок"/>

Понятно. Давайте посмотрим, что относительно назначения директивы v-bind говорит документация:

Динамически привязывает один или несколько атрибутов или входных параметров компонента к выражению.

Вопрос вам: почему вы решили, будто Неработающий заголовок - это выражение?

Объекты категорий складываете в массив, массив кладёте в хранилище. Маршруту добавляете параметр - идентификатор категории. Пробрасываете его в компонент маршрута, где используете его для извлечения данных категории из хранилища. Всё.

$minPrices = array_values(array_reduce($arr, function($acc, $n) {
  $key = $n['code_id'];
  if (!isset($acc[$key]) || $acc[$key]['price'] > $n['price']) {
    $acc[$key] = $n;
  }

  return $acc;
}, []));

const getNestedItems = (data, test) =>
  data instanceof Object
    ? Object.values(data).flatMap(n => getNestedItems(n, test))
    : test(data) ? [ data ] : [];

const result = getNestedItems(obj, x => /^[A-Z]+$/.test(x)).join('');

или

function* getNestedItems(data, test) {
  if (Object(data) === data) {
    for (const k in data) if (Object.hasOwn(data, k)) {
      yield* getNestedItems(data[k], test);
    }
  } else if (test(data)) {
    yield data;
  }
}

const result = ''.concat(...getNestedItems(obj, x => x?.toUpperCase?.() === x));

<div class="wrapper" v-if="надо рендерить обёртку">
  ...
  <элемент />
  ...
</div>
<элемент v-else />

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

все с атрибутом required

Если у них ещё и форма среди общих предков присутствует, то достаточно будет использовать checkValidity.

Ну а если непременно вручную надо проверять, то...

const className = 'здесь ваш класс';

Получаем input'ы:

const inputs = document.querySelectorAll(`.${className}`);

// или

const inputs = document.getElementsByClassName(className);

Проверяем заполненность:

const isFilled = [...inputs].every(n => n.value);

// или

const isFilled = !Array.prototype.some.call(inputs, n => !n.value);

// или

let isFilled = true;
for (const n of inputs) {
  if (!n.value) {
    isFilled = false;
    break;
  }
}

// или

let isFilled = true;
for (let i = -1; ++i < inputs.length && (isFilled = !!inputs[i].value);) ;

// или

const isFilled = !(function isEmpty(i, n = inputs.item(i)) {
  return n && (!n.value || isEmpty(-~i));
})(0);

if (this.frame < 0) {
    this.frame = this.slides.lenght-1;
    this.setBackground(this.slides[this.frame])
}

Если frame неотрицательный, то вызывать setBackground уже не надо?

if (this.frame > this.slides.length) {

По-вашему, у массива может быть элемент с индексом, равным длине?

buttonLeft.addEventListener('click', slider.left());

Функция и результата её вызова - не одно и то же.

while не совсем удобен

Можно while заменить на for, переместить вызов exec в условие продолжения цикла - получится одна строка вместо трёх, область видимости вне цикла не загажена не нужной там переменной, вроде бы неплохо:

for (let m; m = re.exec(str);) {
  console.log(m.groups);
}

Отказаться от exec стоит по другой причине. Проблема в том, что если забыть флаг g при определении регулярного выражения, то exec будет при каждом вызове выдавать первое совпадение, т.е., цикл получится бесконечным. А вот с matchAll такой ерунды не случится, без флага выдаст ошибку:

for (const { groups } of str.matchAll(re)) {
  console.log(groups);
}

Посчитать, сколько раз каждое из значений встречается в массиве, затем полученные результаты разделить на длину массива и умножить на 100:

Array.from(
  arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map),
  n => [ n[0], (n[1] / arr.length * 100).toFixed(2) + '%' ]
)

Вот это правильно - не читать документацию.

yAxis: {
  plotLines: [
    {
      color: 'red',
      value: 13,
      width: 5,
      zIndex: 666,
    },
  ],
  ...

Ключи объектов - это строки, если использовать нестроковое значение в качестве ключа, оно будет преобразовано в строку, дефолтное строковое представление объекта - это "[object Object]". Всё.

Хотите, чтобы объект реально был ключом - записывайте его в Map вместо простого объекта. Или научите свои объекты представлять себя в виде строки, переопределив у них метод toString (конечно, поступать так имеет смысл только в том случае, если вы можете гарантировать, что строковые представления будут уникальны).

\d{1,2} час(?:а|ов)? \d{1,2} минут(?:а|ы)?

tableRef.current.querySelector('.ant-table-body').scrollTop = 0;

Не нужны тут регулярные выражения, для разбора html есть специальные инструменты:

$doc = new DOMDocument();
$doc->loadHTML($html);
$a = $doc->getElementsByTagName('a');
$result = array_map([ $doc, 'saveHTML' ], iterator_to_array($a));

Но, конечно, дурацкое дело нехитрое:

$result = preg_split('/(?<=\/a>)(?=<a)/', $html);

// или

preg_match_all('/<a .*?>.*?<\/a>/', $html, $matches);
$result = $matches[0];