Сергей

Следить за кликами за пределами корневого узла:

function Modal(props) {
  const root = useRef();

  useEffect(() => {
    const onClick = e => root.current.contains(e.target) || закрытьОкно();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div ref={root}>
      ...
    </div>
  );
}

Или сделать так, чтобы корневой узел перекрывал всю страницу, и отслеживать клики по нему:

function Modal(props) {
  return (
    <div
      className="modal-overlay"
      onClick={e => (e.currentTarget === e.target) && закрытьОкно()}
    >
      ...
    </div>
  );
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

https://graphqlzero.almansi.me/

По аналогии с примером из документации:

function Dog(name) {
  this.name = name;
}

const dog1 = new Dog('Gabby');

Dog.prototype.toString = function dogToString() {
  return `${this.name}`;
};
Dog.prototype.sayName = function () {
  alert(this);
};

dog1.sayName();

Задание на знание работы с контекстом функции и методов call и apply

function alertThis() {
  alert(this);
}
alertThis.call('text');

Напрямую нельзя. Нужно через родителя.
Вешаете так же на label дополнительный класс (модификатор),

<label htmlFor={el.name} className={el.checked ? 'checked' : null}>{el.name}</label>

и в стилях задаете необходимые свойства

label.checked {
    &::after{
        /* стили */
    }
}

Квадратные скобки добавьте:

const data = {
  [name]: value,
};

Просто

size.addEventListener('change', priceRequestHundler);

А Вы вызываете функцию. Если бы это была функция высшего порядка, сработало бы. Но была бы ошибка на e, т. к. в тот момент переменная еще не определена. А еще async/await не используют с then.

Можно, например, прописывать шрифт на сайте для элементов в rem, а для html указать размер шрифта стандартный 16px и сделать медиазапрос

@media screen and (max-width: 1440px) {
    html {
        font-size: 14px;
    }
}

Как автоматизировать расчет шрифтов

Если в ТЗ есть задача автоматизировать размер шрифта в зависимости от размеров экрана, должно быть описано, по какому принципу.
Если такой задачи нет, то нужно ориентироваться на размер шрифта, макета под который подпадает экран размером 1326px и задавать его фиксированным

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

const Authorized = require('../moduls/authorized')
const auth = new Authorized();


// так
router.get("path/",auth.isAuthorized.bind(auth));
// или так
router.get("path/",(...a)=>auth.isAuthorized(...a));

и еще кучей способов

вот, можете почитать про Привязка контекста к функции

а еще лучше измените метод isAuthorized примерно так:

isAuthorized(){
   return (req, res, next)=>{
      console.log('isAuth',this)
      // тут код мидлвара
  }
}

и используйте его так

router.get("path/",auth.isAuthorized());
// или
router.post("path/",auth.isAuthorized());
// или
router.use(auth.isAuthorized());

class Authorized {
  constructor() {
    this.jwt = require('jsonwebtoken')
    this.secretKey = 'dSjkLsSjerIfkL'
  }
...

Потому что
n-- не тоже самое что n-1
Первое уменьшает n на единицу и возвращает результат.
Второе возвращает число на еденицу меньше чем n. При этом само n остается прежним, в результате вы и получаете бесконечный цикл (ведь n не меняется)

А вот следующие выражения идентичны:
n=n-1;
n-=1;
n--;

проблема в самом пакете jwt-node который ты используешь, он не установится на винде и заброшен автором уже как 8 лет
https://github.com/mattrobenolt/jwt-node/issues/2
выход - искать более актуальный пакет

fetch('https://api.github.com/gists/public')
  .then(r => r.json())
  .then(r => r.flatMap(n => Object
    .values(n.files)
    .map(({ filename, language, raw_url }) => ({ filename, language, raw_url }))
  ))
  .then(r => console.log(r))

Это лучше делать немного по-другому - вместо того, чтобы слушать изменения scope, лучше привязаться к событию инпута и исходить уже из этого. Еще одним преимуществом привязки именно к события является то, что ты можешь отменить изменение до того, как произойдет рендер. В случае наблюдения за значением в scope ты в любом случа сделаешь 2 рендера инпута: сначала отрисуешь с недопустимым символом, а затем заменишь значение на допустимое(в примере на доли секунды появляется невалидное значение, а затем снова исчезает).
Насчёт таймаута - это один из способов применить апдейты к view части. Чтобы ангуляр отрисовал новое значение, ему нужно совершить digest цикл - то есть пройти по значениям и сравнить их. $timeout - один из безопасных способов это сделать, так как после отработки он запускает digest цикл.

Вот пример того, как это можно сделать.

В твоём примере директива не нужна - ты просто делаешь watch из котроллера и меняешь значение, если нужно.

Используйте CSS Grid'ы + Flex'ы

UPD Отдельно Flex'ами тоже можно сделать.