Сергей delphinpro

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

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

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

Нужно пересмотреть логику работы.
Загружать и выполнять javascript с сервера – так себе идея.

Если вам нужно инициализировать какой-то js-плагин на загруженном html коде, то это лучше делать после выполнения запроса.
Тут разные пути есть.
1. Использовать какой-то микрофреймворк на фронте, который автоматически инициализируется на измененных или новых узлах DOM (например Alpine.js или Stimulus) и в его хуках жизненного цикла инитить плагин.
2. Выполнять все запросы через какую-то свою обертку над fetch, и по всем запросам отрабатывать инициализацию всех используемых плагинов.
3. В ответе сервера передавать дополнительную информацию о том, какой плагин и на каком новом элементе необходимо инициализировать.

Как-то так, примерно.
Никогда не используйте повторяющиеся ID. У вас именно с этим проблема. Ну не совсем с этим, но из-за этого вы не разглядели суть.

function showThumbnail($img, href, title) {
    $img.attr('src', href);
    $img.attr('alt', title);
}

$(".gallery__list").each(function($gallery){
    let $largeImg = $gallery.find('.galleru__item-prem');
    $gallery.mouseover(function(event){
        let thumbnail = event.target.closest('.galleru__item');
        if (!thumbnail) return;
        
        showThumbnail($largeImg, thumbnail.href, thumbnail.title);
    });
});

Хотя тут и jquery то не нужен

function showThumbnail(img, href, title) {
    img.src = href;
    img.alt = title;
}

document.querySelectorAll('.gallery__list').forEach(function(gallery){
    const largeImg = gallery.querySelector('.galleru__item-prem');
    if (!largeImg) console.warn('Нет большой картинки');
    gallery.addEventListener('mouseover', function(event){
        const thumbnail = event.target.closest('.galleru__item');
        if (!thumbnail) return;
        
        showThumbnail(largeImg, thumbnail.href, thumbnail.title);
    });
});

UPD