0xD34F

SELECT COUNT(*) FROM users

$result[0] < 0

То есть, по-вашему, может быть отрицательное количество пользователей. Ну-ну.

<div class="range">
  <input type="range" min="0" max="100" step="1" value="20">
  <input type="text" value="20">
</div>

const range = document.querySelector('.range [type="range"]');
const text = document.querySelector('.range [type="text"]');
range.oninput = () => text.value = range.value;
text.oninput = () => range.value = text.value;

// или

document.querySelector('.range').addEventListener('input', e => {
  e.currentTarget.querySelectorAll('input').forEach(n => n.value = e.target.value);
});

// или

const inputs = document.querySelectorAll('.range input');
const onInput = e => inputs.forEach(n => n.value = e.target.value);
inputs.forEach(n => n.addEventListener('input', onInput));

Если export default встречается более одного раза, то при импорте будет непонятно, что именно надо импортировать.

Вы в :hover забыли transition написать перед opacity и transform.

Во-первых, вместо клика надо обрабатывать событие change.

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

$('.add-task').click(function() {
  const task = $('.input-task').val();
  if (!task) {
    alert('пусто');
    return false;
  }

  $('.todos-container').append(`
    <div class="todo-container">
      <label>
        <b class="task-text">${task}</b>
        <input class="toggle-task" type="checkbox">
      </label>
      <button class="del-task">delete</button>
    </div>
  `);

  $('.input-task').val('');
});

$('.todos-container')
  .on('change', '.toggle-task', function() {
    $(this)
      .closest('.todo-container')
      .find('.task-text')
      .toggleClass('task-done', this.checked);
  })
  .on('click', '.del-task', function() {
    $(this).closest('.todo-container').remove();
  });

.task-done {
  text-decoration: line-through;
}

require('../../models/knowledges')

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

data: () => ({
  showChars: 0,
  ...
}),

Вырезаете соответствующее количество символов из полной строки и отображаете:

computed: {
  typedString() {
    return this.string.slice(0, this.showChars);
  },
},

<h2>{{ typedString }}</h2>

Запускаете интервал, по которому увеличиваете длину отображаемой строки:

mounted() {
  const intervalID = setInterval(() => {
    if (++this.showChars === this.string.length) {
      clearInterval(intervalID);
    }
  }, 50);
},

https://jsfiddle.net/397wqoby/

Что нужно добавить?

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

Потому что центрируется содержимое section, а не содержимое содержимого section. Хотите, чтобы текст в h1 был по центру - добавьте text-align: center;.

Я слышал, что есть метод insert - указываете позицию, и элементы, которые хотите вставить.

function createTree(arr, idKey, parentKey) {
  const tree = {};
  arr.forEach(n => tree[n[idKey]] = Object.assign({}, n));

  return Object.values(tree).reduce((acc, n) => {
    const parent = tree[n[parentKey]];
    (parent ? parent.children = parent.children || {} : acc)[n[idKey]] = n;
    return acc;
  }, {});
}


const tree = createTree(data, 'id', 'parent_id');

.size-otherBtn {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "mSize lSize xlSize xxlSize"
    "sizeGuide sizeGuide shopNow shopNow";
}

$teacherID = чему-то там равен, неважно...

$itemsByTeacherID = [];
foreach ($days as $day) {
  foreach ($day['day_items'] as $item) {
    if ($item['teacher'] === $teacherID) {
      $itemsByTeacherID[$day['day']][] = $item;
    }
  }
}

$('input').on('focus blur', function(e) {
  $(this).toggleClass('active', e.type === 'focus');
});

или

const onFocus = e => e.target.classList.toggle('active', e.type === 'focus');

document.querySelectorAll('input').forEach(n => {
  n.addEventListener('focus', onFocus);
  n.addEventListener('blur', onFocus);
});

А вообще - надо ли добавлять какие-то классы? Есть же :focus.

Можно попробовать запоминать при добавлении индекс нового элемента и использовать его при создании datepicker'а. Как-то так.

Ну и конечно вы правы - лучше сделать компонент. Например, так.

$brands = array_filter($brands, function($n) {
  return isset($n['alias']);
});

Имена компонентов сложить в массив; также добавить свойство, содержащее имя выбранного компонента:

data: () => ({
  activeComponent: null,
  components: [
    { name: 'component-1', label: '#1' },
    { name: 'component-2', label: 'а я второй' },
    { name: 'component-3', label: 'третьим буду' },
  ],
}),

На основе массива создать выпадающий список, привязать имя выбранного компонента к списку через v-model:

<select v-model="activeComponent">
  <option v-for="n in components" :value="n.name">{{ n.label }}</option>
</select>

Если имя компонента выбрано - создать соответствующий экземпляр:

<component v-if="activeComponent" :is="activeComponent"></component>

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

document.querySelector('table').addEventListener('input', function(e) {
  e.target.style.backgroundColor = 
    e.target.innerHTML имеет какое надо значение
      ? 'lime'
      : 'red';
});