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

Удобно использовать Object.assign() — метод копирует все перечисляемые свойства в целевой объект:

const target = { a: '', b: 'V'}; // скопируем сюда
const source = { a: 'AAA', c: 'CCC' }; // отсюда
Object.assign(target, source);
target // { a: "AAA", b: "V", c: "CCC" }

Если не беда, что опустошатся participants, то можно так:

hotel.forEach(({ room }) => room.forEach(slot => Object.assign(slot, participants.pop())));

Ну или так, с нетронутыми participants.

let i = 0;
hotel.forEach(({ room }) =>
  room.forEach((slot) => Object.assign(slot, participants[i++]))
);

Можно посмотреть childNodes этого параграфа. Их будет три: текст, элемент, текст.
Заменить последний на его клон в обёртке:

Там же линейная интерполяция:
value = 1000 + 135 * (15000 - 1000) / 180 = 11500

Но это не учитывает сокращение диапазона пикселей из-за толщины «рукоятки» слайдера — а это уже зависит от стилей, платформы, браузера, положения Венеры в Марсе.

Так выглядит range slider в крайнем правом положении в Mozilla Firefox 106 под Mac Os X:
ширина 150px в масштабе 170%. Сверху точно той же ширины div с тёмной заливкой. CodePen.

Слайдер почему-то смещен на неск. пикселей правее div'а, но длина точно такая же.
Кнопка ездит, не вылезая за края диапазона. Значит, фактический диапазон пикселей меньше, чем сам слайдер.

у поля ввода атрибут pattern должен быть: pattern="\+49[0-9]{10,11}"

В валидации в showError() надо проверять свойство patternMismatch:

} else if (phone.validity.patternMismatch) {
  phoneError.textContent = 'phone should be +49 followed by 10 to 11 digits';
}

Можно изнутри наружу идти:
создавать очередной элемент и вкладывать в него предыдущий.

Массивы с пустыми слотами называются sparse arrays. Разные методы массивов по-разному обходятся с пустыми слотами: более новые их считают undefined, старые методы пропускают.

Топорное решение: собрать индексы присутствующих элементов, и сравнить с полным диапазоном индексов:

const arr = [1,2,3,4,5,6,7,8,9];
delete arr[1];
delete arr[3];
delete arr[5];
// arr == [ 1, <1 empty slot>, 3, <1 empty slot>, 5, <1 empty slot>, 7, 8, 9 ]

const present = [];
arr.forEach((_, i) => present.push(i));
// present == [ 0, 2, 4, 6, 7, 8 ]

const empty = Array.from({ length: arr.length }, (_, i) => i) // [0,1,2,3,4,5,6,7,8]
  .filter(i => !present.includes(i));
// empty == [ 1, 3, 5 ]

Предложил бы редуцировать измерения )
свести двумерное поле к одномерной колбасе.

Если поле 6x6, то это одномерный массив длиной 36 элементов. Каждый элемент — одна из клеток на поле.
Номер элемента однозначно переводится в координаты (x, y), если известна длина стороны поля.

Например, поле 6x6. Нумерация от нуля: 0..5 Число, допустим, 13.

X = 13 % 6 = 1 
Y = floor(13 / 6) = 2

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

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

Так не понадобится холостых повторных попаданий в ранее выбранные клетки. Не понадобится по два случайных генерить. Один рандом — одно 100% попадание.

function generator(quantity, side = 6) {
  const length = side * side;
  if (quantity > length) throw new Error('too much u ask');

  const options = Array.from({ length }, (_, i) => i); // [0,1,2,3, .. ,35]
  const nToPoint = n => ({ x: n % side, y: Math.floor(n / side) }); // 13 => {x:1, y:2}
  return Array.from({ length: quantity }, () =>
    nToPoint(
      options.splice(Math.floor(Math.random() * options.length), 1).pop()
    )
  );
}

console.log(generator(4));
// [{x:1,y:2}, {x:0,y:4}, {x:1,y:0}, {x:4,y:4}]

Нумеровать поля можно парами (x, y), а можно сквозной нумерацией 0..8 как div'ы в контейнере.
Понадобится перевод из одной системы в другую, и назад.

Текущее состояние можно держать как сквозной номер активного дива.
Стрелочки меняют (x, y) координаты.
Не забыть перевести туда-сюда и отрисовать – удаляя/добавляя класс, в зависимости от номера дива.

В первой строке лишний бэк-тик в конце:

textpayload = message.user.bonusNew ? `"{\"button\": \"дуэль\"}"` : "{\"button\": \"бонус_новичка\"}`"

См. последние 2 символа: удалите `
Бэк-тики (обратные кавычки) там вообще-то все не нужны, т.к. не используются их преимущества.

Неблагодарное дело вручную писать JSON со всем эти кавычками – тут обычными, тут экранированные обратными слешами. Лучше сделать обычный объект, и потом его перевести в строку JSON:

const bonusButton = { button: message.user.bonusNew ? 'дуэль' : 'бонус_новичка' };
textpayload = JSON.stringify(bonusButton);

Короткий пример с данными из data-атрибутов,
и единственным слушателем клика — на общем родителе:

Достаточно при изменении значения поправлять его, когда вылезает за 80:

Можно с помощью «сеттеров» — функции, которая вызывается, когда объекту назначают это свойство.

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

class Habr {
  __values = [];

  static delimiter = ';';

  get qna() {
    return this.__values.join(Habr.delimiter);
  }

  set qna(value) {
    if (!this.__values.includes(value)) {
      this.__values.push(value);
    }
  }
}

const foo = new Habr();
foo.qna = 'x=y';
foo.qna = 'a=b';
console.log(foo.qna); // x=y;a=b

Для ранее существовавшего объекта можно переназначить его свойство, вписав сеттер через Object.defineProperty()

Это тернарный оператор (не страшное слово, просто от числа «3»)

условие ? выражение1 : выражение2

Частая ошибка, открыв для себя этот чудесный синтаксис, пихать его везде, где есть условие.
Но это не замена if .. else, где нужны разные действия.
Тернарный оператор — для получения значения.

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

В общем случае политика одинакового источника не позволяет обернуть сайт банка в iframe и слушать, какой там пароль вводят в input.

Лучше вместо setInterval() использовать requestAnimationFrame()
Там принцип: отрисовали кадр – запросили отрисовку следующего. Пошаговая передача эстафеты.

Завести переменную-флаг, которая будет true или false. Разрешать или запрещать анимацию.

На каждом шаге смотреть на эту переменную: и делать следующий requestAnimationFrame() только если переменная true.

Кнопка будет менять состояние этой переменной. И, при переключении из false в true, запускать отрисовку.

Ещё оптимизация: не нужно в каждом кадре искать элементы, достаточно это сделать один раз.