Сергей delphinpro

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';
    });
});

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

Не могут.
Условие scrollY > 0 даст true, если элемент проскроллен хотя бы на пиксель.

Согласен с dollar отчасти, но попробую дать направление.

Для старта таймера делается некий запрос, например переход на страницу start_timer.php
Здесь скрипт берет текущее время, прибавляет к нему необходимый интервал, например пять минут, записывает новое время куда-нибудь, например в базу данных.
Далее пользователь отправляется на скрипт ожидания wait_timer.php
Этот скрипт берет текущее время и время из базы, вычисляет разницу, если она положительная, то формирует html страницу с javascript таймером, передавая туда вычисленную разницу - это время, которое осталось до окончания работы таймера. Джаваскрипт таймер начинает тикать. Когда дойдет до конца, он сделает обновление страницы. Скрипт wait_timer.php снова проверит оставшийся интервал, если он стал нулевым или отрицательным, отправит пользователя на третью страницу end_timer.php. Если разница все еще положительная, скрипт wait_timer.php так же сформирует страницу с js таймером и отдаст ее.

Разделение скриптов на start, wait и end - условное. Это вполне может быть один и тот же скрипт (страница), просто где-то на сервере, сохраняется состояние для текущего пользователя, что его таймер уже запущен, или наоборот еще не запущен.

В таком простом варианте не учитывается разница времени из-за длительности http-запроса, поэтому, если нужна миллисекундная точность, то нужно будет применить дополнительные методы синхронизации.

Так у вас уже все готово

function createApp () { //добавляем содержимое в html-вёрстку
    // прочитать список
    studentList = JSON.parse(localStorage.getItem("myKey") ?? '[]');

    const container = document.querySelector('.conteiner'); // подключаем контейнер
    const tableObj = createTable(); // создаем таблицу
    container.append(tableObj.table); // добавляем в разметку созданную таблицу
    const addBtn = document.querySelector('.add-btn'); // поключаем кнопку
    addBtn.addEventListener('click', () => { // навешиваем событие на кнопку, чтобы при клике срабатывала функция
      addStudent(studentsList, tableObj.tbody); // функция добавления студента из формы.
      // При каждом обновлении сохраняем
      localStorage.setItem("myKey",JSON.stringify(studentsList));
    });
    // А это не надо
    // localStorage.setItem("myKey",JSON.stringify(studentsList));
}

console.log(document.styleSheets);
console.log(document.styleSheets[0].cssRules[0].selectorText);

https://learn.javascript.ru/onscroll
https://learn.javascript.ru/size-and-scroll