Сергей delphinpro

.products__item {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.products__item.inactive {
  opacity: 0.5;
}

Да забудьте вы уже про resize!
Есть же matchMedia. Сделайте два медиавыражения
(min-width: 1024px)
(max-width: 1023px)
В одном инициализируйте плагин, в другом удаляйте. Обработчик matchMedia вызывается один раз при срабатывании медиа-выражения, а не на каждый чих, как resize, проблем не будет.

Где-то основном скрипте

import {Activity} from "../Android.js";
window.Activity = new Activity();

Потом в любом месте

<script type="module">
   Activity.startActivity(...);
</script>

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

Но сделать можно. Стиль видимости применить только на мелких экранах.

.menu {
  display: none;
}

@media (max-width: 600px) {
  .menu.open {
    display: block;
  }
}

obj - это объект.
К полям объекта можно обращаться через точку или квадратные скобки

например

const obj = { prop: 123 }

// Это два одинаковых выражения
obj.prop // 123
obj['prop'] // 123

Строка 'prop' тоже может быть переменной

const obj = { prop: 123 }
const name = 'prop';
obj[name] // 123

Круглые скобки - это вызов функции.
Функция может содержаться в переменной

const my_func = function() {}
// чтобы ее вызвать
my_func();

И все это может комбинироваться.
Функция может быть частью объекта

const obj = {
  my_func: function(){}
}

Может передаваться в объект через переменную

const my_other_func = function() {}
const obj = {
  my_func: my_other_func
}

И может быть вызвана
при обращении к свойству объекта через точку
obj.my_func()
при обращении к свойству объекта через квадратные скобки

obj['my_func']()
// или
const name = 'my_func';
obj[name]()

Как минимум, в коде не видно подключения jquery

https://codepen.io/delphinpro/pen/bGjpKWY
https://codepen.io/delphinpro/pen/BEZgwR

Можно просто использовать переменную в замыкании

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
     button.toggleClass('active');
  });
});

Ну или референс из события

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', event => {
     event.target.toggleClass('active');
     // Или так, если есть вложенные элементы
     // event.target.closest('.button').toggleClass('active');
  });
});

const pName = prompt('Введите имя первого человека');
const pAge = prompt('Введите возраст первого человека');
const secName = prompt('Введите имя второго человека');
const secAge = prompt('Введите возраст второго человека');

const person1 = new Person(pName, pAge);
const person2 = new Person(secName, secAge);

const car1 = new Car('sedan', 'petrol','rear brakes','hunday', [person1]); 
const car2 = new Car('van', 'diesel', 'rear brakes','nisan', [person1, person2]);

const garag1 = new Garag ('Cindy', '2 Cars', [person1], [car1,car2]);
const garag2 = new Garag ('Jon', '1 Cars', [person2], [car2]);

console.log(garag1,person1,car1,car2);

Поменяйте пару событий mouseover/mouseout на mouseenter/mouseleave

Заменить див на кнопку (потому что по сути – это кнопка) и дисейблить ее по клику.

https://codepen.io/delphinpro/pen/BEZgwR

Http Basic Authentification
Настраивается на сервере. Вызывается браузером автоматически, если сервер требует такую аутентификацию.
Для php https://www.php.net/manual/ru/features.http-auth.php

Делайте делегирование правильно https://qna.habr.com/q/1235504

const o = e.target.closest('.blog__item')

Не нужно событие "погружать". Оно и без вас погрузится и всплывет. Вам нужно только отследить его.