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

Без регулярок можно )

parseInt(str.split("").filter((c) => c !== " ").join("").split("—")[1])

Удалить все пробелы, разбить по тире, парсить как целое (проигнорирует символ валюты).

Написать Shared Web Worker.
Подписаться на сообщения от него: он может прислать команду «деактивируйся!» (и «активируйся снова!» – в сложном варианте).

При старте отправлять в него сообщение, регистрирующее вкладку по уникальному ID. Случайное-уникальное, хранится в скрипте во вкладке, запоминается и в воркере.

Воркер по такому сообщению принимает новый ID и деактивирует остальные (отправляет им сообщения).
Принцип «каждый новый побеждает предыдущих».

Если нужно реализовать возврат полномочий к предыдущей вкладке, когда закрыли «активную» – можно придумать протокол. Воркер может по очереди пинговать ID вкладок: «жив?» – нет (таймаут) – следующий «жив?» – жив — «будешь главным».

У текста же и так класс родительского дива class="red"

document.querySelectorAll('div.red').forEach((el) => {
  el.childNodes.forEach((node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const wrap = document.createElement('span');
      wrap.classList.add('violet');
      el.replaceChild(wrap, node);
      wrap.appendChild(node);
    }
  })
})

Для движения лучше менять атрибут transform группы со зрачком.
Маской сделать видимость зрачка только внутри формы глаза.

CSS правила обычных HTML-элементов для элементов SVG не работают.

В HTML разметке у элемента не id, а класс class="street"

По идее, любой же клик вне должен закрывать?
Можно выставлять какую-то переменную флагом состояния меню: открыто / закрыто.
При открытии начинать слушать на корневом document событие "click" или "mousedown".

При клике смотреть, содержится ли цель клика где-то под div.mobile-panel через однократный вызов Node.contains() (он смотрит сразу на любую глубину). Если внутри – не прятать, если снаружи – закрывать меню.

const menuRoot = document.querySelector('div.mobile-panel');
document.addEventListener('mousedown', (e) => {
   if (! menuRoot.contains(e.target)) {
      document.body.classList.remove('-show')
   }
})

Такой квиз – это дерево. На каждом шаге выбирается одна из ветвей.

Можно добавлять ветви через поле типа "child" в каждом из вариантов:
На практике не очень удобно описывать такую структуру глубоко – легко ошибиться со скобками и пр. В недавнем эксперименте я предпочёл описывать дерево в YAML – там просто отступами – и генерить скриптом из него уже нужную структуру в JSON.

Из data-атрибута получать номер квартиры. По нему выбирать и path и элемент списка:

Подробнее.
Интересуют события, когда мышка наезжает на path или на элемент списка, и когда уезжает.

И у path и у элементов списка у каждого в дата-атрибуте data-flat записан номер квартиры.
Когда происходит событие, надо:

1. получить из data-атрибута номер квартиры
   
2. переключить класс active (включить или выключить его, в зависимости от типа события
   

Зная номер квартиры, можно выбрать элементы, у которых атрибут data-flat совпадает с этим номером. Для этого используется селектор [data-flat="42"]

вставлять этот текст снаружи span'а.


Код был бы проще, если именно для вставки динамического текста был пустой элемент в каждом item'е. Сейчас приходится удалять узлы, кроме 1-го (это span с первым словом). А потом добавлять текстовый узел в div.

неоптимально, некрасиво, но может натолкнёт на мысли

С let на каждой итерации создаётся окружение.

См. ECMASCript CreatePerIterationEnvironment( perIterationBindings )

Можно так переписать:

for(var i = 0; i < 3; i++) {
  let j = i; // доступна только на этой итерации в этом блоке
  setTimeout(() => console.log(j), 0);
}
/*
0
1
2
*/

"Z" прикрепляется же к самому первому "promise". На том же «уровне», что и "X"

По событию "input" на любом из селектов вызывать функцию проверки. Она возьмёт значения обоих и проверит условие.

Не показали HTML-разметку. Где там элемент canvas, с какими атрибутами?
По умолчанию у элемента размеры 300х150. Стилями вы его растягиваете до 450х450, вот он и вытягивается, изумлённо, по вертикали.

Поможет указать размер: <canvas width="450" height="450"></canvas>

p.s. толщина линий по краям canvas будет вполовину меньше от остальных, т.к. пол-линии оказывается за кадром.

Возиться с разметкой как с текстом – неудобно.

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