Сергей Соколов

По событию "input" отменять предыдущий таймаут, если был, и создавать новый, на 5 секунд.

if (n >= 2) {
  if (step === n) {
    e.classList.remove("d-none")
    e.classList.add("d-block")
  } else {
    e.classList.remove("d-block")
    e.classList.add("d-none")
  }
}

Понадобится переменная, учитывать текущее состояние: сколько шагов уже выбрано.
При клике увеличивать эту переменную на 1. Перебирать все шаги, брать порядковый номер, например, из id "step-XXX".
Сравнивать с текущим значением переменной и добавлять класс, если переменная дотянула уже до текущего.

Раз там дискретно, целыми, то можно по одному литру раскладывать в цикле.
Для массива посчитать «спрос» – сколько в идеале там должно быть (дробные числа).
И на каждой итерации определять самый обездоленный, далёкий от своего идеала, элемент массива – туда класть очередной литр.

function spread(q, volumes) {
  const total = volumes.reduce((a, b) => a + b);
  const result = volumes.slice().fill(0);
  const target = volumes.map((v) => q * v / total);

  while (q--) {
    const demand = result.map((v, i) => target[i] - v);
    const minIndex = demand.indexOf(Math.max(...demand));
    result[minIndex]++;
  }

  return result;
}

spread(4, [1, 10, 3]) // [0, 3, 1]
spread(9, [1, 10, 3]) // [1, 6, 2]
spread(1, [10, 10, 10]) // [1, 0, 0] - слева направо при равных
spread(33, [10, 10, 10]) // [11, 11, 11] - переполняются тоже одинаково

spread(4, [2, 3, 1]) // [ 1, 2, 1 ]
spread(5, [2, 3, 1]) // [ 2, 2, 1 ]
spread(9, [2, 3, 1]) // [ 3, 5, 1 ]

Нужно разбить фразу по пробелу в массив входных слов.
Так же разбить по пробелу в массив строку со словами для поиска.

Найти в первом массиве индексы поисковых слов.

Прочитать про метод массивов splice()
Этим методом удалить элементы, начиная со следующего, после 1-го слова, до 2-го слова index2 - index1 + 1 и заменить его фразой replacement.

такая же длинная макаронина получилась:

[...arr.reduce((acc, c) => (acc.set(c, (acc.get(c) ?? 0) + 1), acc), new Map()).entries()]
  .sort((a, b) => b[1] - a[1]).map((el) => el[0])

Собрать словарь (значение: счётчик), из него массив пар [key, value] отсортировать по убыванию второго; оставить только первые.

План-А: отсортировать перед сравнением

const areEqual = (arrA, arrB) => {
  if (arrA.length !== arrB.length) return false;
  const a = arrA.slice().sort(), b = arrB.slice().sort();
  return a.every((el, i) => el === b[i]);
}

План-Б: хэш-таблица (значение: число элементов с таким значением). Посчитать в одном массиве, в другом, сравнить: должны совпасть. Это решение отлично реализовал в своём ответе 0xD34F

План-Х: удалять из копий совпадения по одному. Этот вариант неэффективен. Приведён для развлечения.

const areEqual = (arrA, arrB) => {
  if (arrA.length !== arrB.length) return false;
  const a = arrA.slice(), b = arrB.slice();
  while (a.length) {
    const i = b.indexOf(a.pop());
    if (-1 === i) return false;
    b.splice(i, 1);
  }
  return true;
}

в setTimeout() первым параметром надо передавать функцию, которая выполнится только там когда-то.

setTimeout(
            () => $('.success-message').css({

Эффект наз. starfield, вот разбирают как сделать на canvas. В простом виде: летят точки. Для красоты надо их сделать меньше числом, но каждой добавить размытие-свечение.

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

Используя полупрозрачность и режимы наложения, можно отрисовав кругов 20 получить интересные эффекты:

Объявить метод статическим:

class Name1 {

  static method1() {
    console.log(1);
  }

}

class Name2 {

  method2() {
    Name1.method1();
  }

}

const N2 = new Name2();

N2.method2()

Можно трансформировать canvas: сжать по вертикали и повернуть на 45°. Теперь, если рисовать квадраты — получатся ромбики!

Только Y-координата идёт сверху вниз – тут уж сами разберётесь. Наклоните голову влево, чтобы сориентироваться )


А тут можно перемещаться стрелочками и A-S-D-W. Кликните внутри фрейма, чтобы клавиши заработали:

getElementsByClassName возвращает HTMLCollection.

Попробуйте document.getElementsByClassName('xxx')[0].click();

Бардачный код: переменные не объявлены. В s попадает элемент span, а не значение.

Тут вроде заработало.

Если я правильно понял вопрос:

const elements = { // сюда складывать элементы
  list: [],
  btn: [],
};

function pushItem() {
    const div = document.createElement('div'); // временный родитель
    div.innerHTML = `<div class="listItem">${items.pop()}<button class="delete">Отменить</button></div>`;

    elements.list.push(div.querySelector('.listItem');
    elements.btn.push(div.querySelector('.delete');

    // перенести из временного в постоянный
    while (div.childNodes.length) { // с запасом: вдруг там несколько элементов
        list.appendChild(div.childNodes[0];
    }
};

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

Потому, что kol это индекс не в массиве, а в команде юзера. Обычно эта команда идёт прямо с начала строки, т.е. с индекса 0.

Надо просто exitElement = words[i]