0xD34F

Если открыть раздел спецификации SVG посвящённый фигурам, то нетрудно будет увидеть, что среди элементов, которые могут являться контентом фигур, сами фигуры отсутствуют. Нельзя вкладывать одну фигуру в другую.

const values = Array.from(
  document.querySelectorAll('.aside input[type="checkbox"]:checked'),
  n => n.value
);

Почему console.log('\n' == separator.value); возвращает false?

Потому что \n - это перенос строки. Экранируйте слэш - '\\n' == separator.value.

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

const steps = Object.entries(answers).reduce((acc, [ key, val ]) => {
  const question = questions.find(n => n.key === key);
  const step = acc[val.step] = acc[val.step] || [];

  step.push({
    step: val.step,
    question: { ...question.question },
    answer: question.answer.values instanceof Object
      ? question.answer.values[val.answer].en
      : val.answer,
  });

  return acc;
}, {});

Сделайте computed свойство, зависящее от наличия ошибок - и используйте это свойство как значение для disabled кнопки. Как-то так.

Достали значение из localStorage, сделали JSON.parse, внесли изменения, сделали JSON.stringify, положили значение в localStorage:

const arr = JSON.parse(localStorage.getItem('arr')) || [];
arr.push(1, 2, 3);
localStorage.setItem('arr', JSON.stringify(arr));

Указывайте nth-child и для родительского блока. Типа так.

UPD. Ну и ещё посмотрите в сторону использования препроцессоров - у вас тут получается много дублирующегося кода, можно же всё сократить.

Всё работает. "Не работает" и "работает не так, как я ожидаю" - это не одно и то же.

Назначение значения свойства на основе параметра осуществляется однократно - в data, при создании экземпляра компонента. Так что если хотите использовать в шаблоне именно свойство, вам его придётся обновлять вручную - вешайте watch на параметр.

Так:

img {
  filter: hue-rotate(180deg) saturate(10);
}

??

И цвет не должен меняться как градиент. Сначала 90% черный #000 потом 10% красный

И тем не менее - это можно сделать именно градиентом:

background: linear-gradient(to right, black, black 90%, red 90%);

const lowered = str.toLowerCase();
const filtered = data.filter(n => !n.name.toLowerCase().indexOf(lowered));

или

const filtered = data.filter(function(n) {
  return n.name.toLowerCase().startsWith(this);
}, str.toLowerCase());

или

const filtered = data.filter(((reg, n) => reg.test(n.name)).bind(null, RegExp(`^${str}`, 'i')));

const getRandomInt = (min, max) => (Math.random() * (max - min + 1) + min) | 0;
setInterval($counter => $counter.text(getRandomInt(200, 300)), 500, $('.counter'));

str.match(/([^/]+)\.[^\.]+$/)[1]

// или

str.split('/').pop().split('.').shift()

// или

str.split(/[/.]/).slice(-2)[0]

// или

str.replace(/.*\//, '').replace(/\..*/, '')

// или

str.slice(str.lastIndexOf('/') + 1, str.lastIndexOf('.'))

Никакую ширину под контент подстраивать не надо. Расположите элементы в обратном порядке - тогда заработает селектор .myLink:hover ~ .marker, а чтобы они отображались по-старому, можно использовать flex. Как-то так.

чтобы числа повторялись не более двух раз

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

Вешаете обработчик клика, внутри делаете options.set. Например.

SELECT *, price * ((100 - discount) / 100) AS discounted
FROM prices
ORDER BY discounted
LIMIT 10

$(document).on({
  focus() {
    $(this).addClass('active-amount-input');
  },
  blur() {
    $(this).removeClass('active-amount-input');
  },
}, '.amount, .amount_1');

или

$(document).on('focusin focusout', '.amount, .amount_1', e => {
  $(e.currentTarget).toggleClass('active-amount-input', e.type === 'focusin');
});

Смещайте сайдбар, а не main (ну и кнопку открытия-закрытия тоже - поскольку она вне сайдбара).

Изменяем назначение классов:

- <main className={active ? 'move-to-left' : ''}>
+ <main>

- <div className="sidebar">
+ <div className={'sidebar ' + (active ? 'move-to-left' : '')}>

- <NavRight onClick={this.toggleActive} buttonClass={!active ? 'active' : ''} navClass="hidden-xs" />
+ <NavRight onClick={this.toggleActive} buttonClass={active ? 'active move-to-left' : ''} navClass="hidden-xs" />

И стили:

+ body {
+   overflow: hidden;
+ }

.sidebar {
  ...
- z-index: 1;
- right: 0;
+ z-index: 3;
+ right: -400px;
+ transition: all .7s ease;

UPD. Вынесено из комментариев:

Имелось в виду, что контент тоже двигается при смещении sidebar, но не убегает полностью в левый угол, а остается по центрy оставшейся ширины

Вместо того, чтобы делать transform, меняйте ширину. Как-то так.