Сергей delphinpro

Посчитайте максимально возможное смещение. Оно будет равным суме ширин все слайдов и промежутков между ними, минус ширина контейнера слайдера.
Если текущее смещение (-currentIndex * 220) будет превышать максимальное, то не применять его.

Это сделает параграф невидимым для мышки

div p {
  pointer-events: none;
}

А так вы можете определить по какому элементу сделан клик

document.querySelector('div').addEventListener('click', e => {
  console.log(e.currentTarget); // Будет див, даже если кликнули на внутренний элемент
});

document.querySelector('div').addEventListener('click', e => {
  console.log(e.target.closest('div'));
  // Будет НАЙДЕН див, внутри которого, или на нем самом кликнули
});

containers.forEach((el) => {
  el.addEventListener("click", e => {
    e.currentTarget.querySelector('.element-3').classList.add('active');
  });
});

function run(cb) {
     directionsService.route(route,
         function(response) {
                // ...
                let distKm = parseInt(dist / 1000);
                cb(distKm);
              }
    });
}

run(function(result){
  console.log(result);
})

с учетом ваших комментов:

document.getElementById('btn-next').onclick = () => {
  run(function(result){
    console.log(result);
  })
};

let array = [1,2,3,4,5,6,7,8,9,10,11]
const chunkSize = 3;
let chunks = [];

while (array.length > 0) {
  chunks.push( array.splice(0, chunkSize) );
}

console.log(chunks);

Вы можете использовать любое хранилище - БД, куки, локальное хранилище, сессию.
Куки и localstorage в принципе можно поправить или вовсе очистить средствами браузера.
БД или php-сессия в этом смысле более надежна.

А сам принцип один, вне зависимости от того, какое хранилище вы будете использовать.
1. Клик
2. Проверить, сохранено ли время предыдущего клика
3.1. Если нет, то разрешить голосование. И сохранить время.
3.2. Если да, то проверить время.
3.2.1. Если прошло достаточно, разрешить голосование и сохранить время
3.2.2. Если нет, ничего не делать или сообщить пользователю, что он слишком увлекся.

у вас неточность. в примере на jquery вы просто ловите событие
а в примере на ваниле хотите инициализировать плагин.

Это разные вещи.

Поймать событие просто. Вешайте обработчик на document и смотритте что прилетело в event.target

В случае с плагином, если он сам не поддерживает инициализацию на созданных в рантайме элементах, вам придется самостоятельно отслеживать появление новых узлов в DOM и по условиям инитить на них плагин. Но это в общем случае, для универсальности. В частном случае можно вклинится в процедуры открытия тех же попапов и там подключать маску. Например напрямую в клике кнопки "Открыть попап", или удобнее, в обработчике события "popup.opened" (условно, я не знаю, какие попапы у вас используются, но у большинства плагинов есть события открытия/закрытия).

что то вы гоните

https://api.jquery.com/position/

.position()

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

Это базовые особенности языка. Объясняются в любом учебнике.
В джаваскрипт оператор "+" является двойственным. В зависимости от ситуации он может быть как оператором сложения (чисел), так и оператором конкатенации (склеивание строк).

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

let s1 = '1';
let s2 = '2';
console.log(s1 + s2); // '12'

Здесь оба операнда являются числами, поэтому знак плюс будет оператором сложения.

let n1 = 1;
let n2 = 2;
console.log(n1 + n2); // 3

Могут быть ситуации, когда один из операндов будет числом, а другой – строкой.
В этом случае числовой операнд будет преобразован в строку

let s1 = '1';
let n2 = 2;
console.log(s1 + n2); // '12'

Когда вы получаете значения инпутов со страницы, они всегда будут строчного типа, во всех ситуациях. Поэтому, прежде чем выполнять над этими значениями математические операции, их нужно преобразовать в числа
parseInt() - в целое число
parseFloat() - в число с плавающей точкой
Number() - можно еще так
+n2 - или так (это уже своего рода хак, основанный на приведении типов)

Number(element1.innerHTML) + Number(element2.innerHTML)

Все подробности здесь https://learn.javascript.ru

const sort = 'other';
const any  = 'other';

const obj = {
  sort: 'my name is sort',
  other: 'my name is other',

  test() {
    console.log(this.sort);  // 'my name is sort'
    console.log(this[sort]); // 'my name is other'
    console.log(this[any]);  // 'my name is other'
  }
}

obj.test();

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

const toggler = document.getElementById('menu-toggle');
const menuLinks = document.querySelectorAll(".menu-link");
for (let el of menuLinks) {
  el.addEventListener("click", () => {
    toggler.checked = !toggler.checked;
    // toggler.checked = false; // или так
  });
}

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

f = () => {
  return {
    ...fields
  }
}

Однако здесь всего одно выражение в теле функции и его можно сократить

Мы не можем написать так

f = () => {
  ...fields
}

Будет ошибка синтаксиса. Но можем обернуть возвращаемый объект в круглые скобки

f = () => ({
  ...fields
})

Нужно сделать простую разметку

<div class="body">
  <button class="button">B1</button>
  <div class="content">Content 1</div>

  <button class="button">B2</button>
  <div class="content">Content 2</div>

  <button class="button">B2</button>
  <div class="content">Content 2</div>
</div>

А потом раскладку делать флексами+order или гридами. И медиа запросы к любому варианту

Самый простой способ – вывести данные на страницу и отправить эту страницу на печать в пдф файл.
Способ посложнее – использовать какую-нибудь библиотеку для создания пдф. Например mpdf.

определять position относительно блока с position: relavive

Вот об этом и нужно было спрашивать, а не выдумать что-то...

Для определения позиции элемента в jquery уже есть методы.

https://api.jquery.com/offset/
https://api.jquery.com/position/

Хорошо бы разметку видеть.
Допустим она такая

<div class="answer-block">
    <button class="viewAnswer"> </button>
    <button class="closeAnswer"></button>
    <div class="answer-comment"> .... </div>
</div>

Тогда код может быть такой

const answers = document.querySelectorAll('.answer-block');
answers.forEach(answer => {
    const open = answer.querySelector('.viewAnswer'),
    const close = answer.querySelector('.closeAnswer');
    const comment = answer.querySelector('.answer-comment'),

    open.addEventListener('click', function(){
        comment.style.display = 'block';
        open.style.display = 'none';
        close.style.display = 'block';
    });

    close.addEventListener('click', function(){
        comment.style.display = 'none';
        open.style.display = 'block';
        close.style.display = 'none';
    });
});

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