Шохрух Шаймардонов

Попробуйте Leaflet

Подкорректировал

elem.addEventListener('click', function(arg) {
    //Your code is here...
});

У вас почти все имеется(судя по описанию задачи) вам только необходимо сделать блур. Для этого используйте ::before и ::after, стилизуйте их. Если решение нужно для современных браузеров то достаточно для них задать blur() в css, инача через js либо тот же самый css, только немного больше кода вместо blur'a

Почитайте про области видимости и про this в js.
У вас this.scrollId не туда обращается

Лучше id присвойте к переменной и через него удаляйте таймаут

Замените setTimeout на setInterval

Этот вариант смотрели?

Возможно я не так понимаю проблему, но может вам стоит просто также при сабмите ajax-ом отправлять запрос на сервер и редиректить на ту же страницу

Вот тут показан пример, который работает даже на шестом осле.
А по поводу того, как менять картинки во время изменения, то вешайте eventListener и собственно меняйте картинку

Почитайте тут, должно помочь решить проблему

Или вот так:

const books = {
  "1": [["foo", 5], ["bar", 8], ["noo", 9]],
  "2": [["bmk", 7]],
  "7": [["jol", 1], ["lon", 2]]
}
let count;
for (const key in books) {
  if (typeof books[key] == 'object') {
  	count += books[key].length
    console.log(count)
  }
}

Если получаете данные со стороннего API, то записывайте их во временную переменную у себя и сравнивайте с новым результатом, а вывод уведомления по условию можно сделать элементарным if else

if(newResult! = prevResult)
    showPopup();

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

P.s. На ваш страх и риск, гугл/ютуб если спалит и обидится, то хорошего не ждите

Если документация то однозначно MDN

Также туториалы на w3 школе