dollar

Canvas, если хочется быть уверенным в кроссбраузерности.
Степень геморности примерно такая же.

При правильном программировании можно будет в будущем легко масштабировать форму целиком и тюнить внутренние макро параметры, меняя лишь константы в скрипте.

С другой стороны, вы потеряете всех, у кого отключён JS в браузере (на вашем сайте).

Это задание. Поэтому нужно вложиться деньгами или временем, а просто так в одном абзаце получить ответ не получится. В лучше случае вас можно отправить учиться или гуглить, но так вы начнёте тратить своё время как раз.

Лучше использовать sort(). Это нативная, а потому быстрая, функция. Своя функция, если опустить время на создание массива, будет на порядок медленнее.

Таким образом, всё упирается в копирование данных. И здесь могу посоветовать только одно: данные должны быть уже в переменных JS на момент загрузки страницы. Конечно, в самой таблице - тоже, на случай отсутствия JS у пользователя. И каждая сортировка просто формирует таблицу заново.

Ещё вариант, сделать массив непосредственно из DOM-элементов, как-то так (пример):
[...document.querySelectorAll('tr')]
А после применения sort(), можно с помощью insert'ов сделать новую таблицу или даже пушить в существующую. Здесь плюс в том, что вы не меняете оформление и формат таблицы. То есть если другой программист (или вы в будущем) добавит новый столбец, то код, вероятно, не сломается.

К слову, если у вас 100-500 элементов, а на странице редко бывает больше 500, то сортировать можно как угодно, пользователь не заметит разницы.

Примерно так:

var obj = res.items[0].snippet.thumbnails;
var max_width = 0, max_height = 0, name = 'unknown';
for(let k in obj) if (max_width < obj[k].width) {
  max_width = obj[k].width;
  max_height = obj[k].height;
  name = k;
}
console.log('Name: ',name,' Width: ',max_width,' Height: ',max_height);

const COOLDOWN_TIME = 15000;

function startCooldown(skill) {
	skill.Disable();
	setTimeout(()={
		skill.Enable();
	}, COOLDOWN_TIME);
}

Примерно так:

Не разбираясь во всех ваших хитросплетениях, давайте просто отдебажим ваш код:

1. 
   

   const modal = new Modal(document.querySelector('.modal'));

   
   Это то, что выполнится первым. В конструктор передается результат поиска элемента. Если элемент не найден, то querySelector выдаст null. Очевидно. Здесь нет проверок на null, но будем надеяться, что в теле конструктора они точно есть. Ну или хотя бы есть полная уверенность, что элемент с таким классом обязательно есть на странице.
   
2. Входим в конструктор:
   

   this.modalElement = modalElement;
   // .......
   this.modalElement.querySelector(..................);

   
   И здесь происходит ошибка. Странно, проверки на null нигде нет. И судя по тексту ошибки, вы пытаетесь вызвать метод querySelector переменной modalElement, которая имеет значение null. Следовательно, в самом начале элемента с классом modal не было на странице.
   

В JavaScript разницы нету. А вообще обычно разница в том, что объект может иметь методы, которые можно вызывать в контексте объекта. В том числе конструктор. В JavaScript, соответственно, есть прототипы. Но ирония в том, что массив в JavaScript - это тоже объект. Вообще этот язык исторически тянет кучу дикости с древних времен, а нам с этим жить. Хотя если строго формально, то ассоциативных массивов в JS нет.