Артем

К сожалению в доке не совсем ясно, что в source_id требуется указывать не ID из справочника, а STATUS_ID.
В данном случае для вебсайта укажите "SOURCE_ID" => "WEB".
А сами статусы можно посмотреть запросом

BX24.callMethod(
        "crm.status.list", 
        { 
            order: { "SORT": "ASC" },
            filter: { "ENTITY_ID": "SOURCE" }
        }, 
        function(result) 
        {
            if(result.error())
                console.error(result.error());
            else
            {
                console.dir(result.data());			
                if(result.more())
                    result.next();						
            }
        }
    );

const result = arr.map(function(n) {
  return this[n];
}, Object.fromEntries(sum.map(n => [ n.id, n.name ])));

// или

const names = new Map(sum.map(n => [ n.id, n.name ]));
const result = arr.map(n => names.get(n));

// или

const result = arr.map(n => sum.find(m => m.id === n)?.name);

Но что если в массиве sum отсутствуют некоторые из нужных элементов, а получать undefined внутри массива с результатами не хочется?

Можно подставлять вместо отсутствующих элементов какое-нибудь дефолтное значение:

const result = arr.map(function(n) {
  return this[n] ?? 'объекта с таким id нет';
}, Object.fromEntries(sum.map(n => [ n.id, n.name ])));

Или есть вариант получать только то, что существует:

const names = new Map(sum.map(n => [ n.id, n.name ]));
const result = arr.reduce((acc, n) => (names.has(n) && acc.push(names.get(n)), acc), []);

Потому что вы и не обрабатываете ошибку. Оберните вызов метода await getUser() в try catch.

const fakeUrl = 'https://api.github.co'

function getUser(url) {
  return new Promise((resolve, reject) => {
  	fetch(url).then(data => resolve(data.json())).catch(err => reject(err))
  })
}

const app = async () => {
  try {
  	const result = await getUser(fakeUrl)
  	console.log(result)
  } catch (error) {
  	console.log('error', error)
  }
  
  console.log('end')
}

app()

await getUser(fakeUrl).then(console.log).catch(console.error);

let shop_id = 82;
data[`SHOPID_${shop_id}`].name_shop;

Если завернуть объект в Proxy, можно будет изменять ключи при обращениях к объекту:

const obj = new Proxy({}, {
  get(target, key) {
    const lowerKey = key.toLowerCase();
    return target[Object.hasOwn(target, lowerKey) ? lowerKey : key];
  },
  set(target, key, val) {
    target[key.toLowerCase()] = val;
    return true;
  },
  has(target, key) {
    return key in target || key.toLowerCase() in target;
  },
  defineProperty(target, key, descriptor) {
    return Object.defineProperty(target, key.toLowerCase(), descriptor);
  },
  deleteProperty(target, key) {
    return delete target[key.toLowerCase()];
  },
  getOwnPropertyDescriptor(target, key) {
    return Object.getOwnPropertyDescriptor(target, key.toLowerCase());
  },
});

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

&:nth-child(2n-1):last-child {
    grid-column: span 2
  }

1. сделать объект, где ключи – названия брендов, а значения накапливают сумму
   
2. из объекта снова сделать массив объектов первоначального вида
   

// итерации 1-го этапа:
{}
{'iowa': 12}
{'iowa': 12 + 42 = 54}
{'iowa': 54, 'zero': 58}
{'iowa': 54, 'zero': 58 + 32 = 90}

и на втором преобразовать объект {'iowa': 54, 'zero': 90} в массив как у вас ожидается.

const uniqueWithSum = (arr, idKey, sumKey) =>
  Object.values(arr.reduce((acc, n) => {
    const id = n[idKey];
    acc[id] ??= Object.assign(new n.constructor, n, { [sumKey]: 0 });
    acc[id][sumKey] += n[sumKey];
    return acc;
  }, {}));


const result = uniqueWithSum(data, 'brand', 'price');

Ты в .header указал height: 120px; и потом в этот .header пытаешься вставить .header-image которому задал height: 644px;.
Нужно в html вынести .header-image из .header, примерно так:

<div class="wrapper">
<header class="header">...</header>
<div class="header-image">...</div>
...
</div>

Студентам в начале курса говорила, кто хорошо в детстве играл в лайнс, тетрис и подобное, тот будет хорошо верстать.
Верстка это обычная геометрия средней школы записанная с помощью тегов и раскрашеная/подвинутая стилями. Всё.
Всякие JS и т.д. это просто следующий этап.

План действий может быть таким:
1. Берете/получаете макет
2. Внимательно рассматриваете его, мысленно разбивая на блоки. Думаете что куда может/должно растягиваться или уменьшаться при изменениях экрана и увеличении/уменьшении контента.
3. Если п.2. сразу не осилился, идете гулять или спать.
4. Возвращаетесь к п.2.
5. Верстаете понятные большие блоки, затем их заполняете. Разбивайте задачи более простые.

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

А совсем без проблем не выйдет, потому что экранов много, браузеров много, хотелок у заказчиков еще больше. Хорошо, когда эти хотелки интересные :)

aaray2.every(x => array1.includes(x));

Если это элементы с разными классами и т.д., то можете собрать отдельную коллекцию элементов в массив, затем через forEach пройтись по этому массиву и навесить им слушатель, если я правильно понял вопрос.

Обычно делают так:

document.body.addEventListener('mouseenter', function(e) {
    console.log(e.target);
});

В переменной e.target будет лежать целевой элемент, проверяйте его на соответствие и если он соответствует...

code.mu/ru/javascript/manual/dom/matches

Вот и напишите проект, который будет генерировать идеи проектов.

const rootEl = useRef(null);

useEffect(() => {
  const onClick = e => rootEl.current.contains(e.target) || console.log('клик вне компонента');
  document.addEventListener('click', onClick);
  return () => document.removeEventListener('click', onClick);
}, []);

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

Не, ну конечно можно прямо на гитхабе редактировать файлы, и делать коммиты, но это дичь полная.
По-моему, лучше сделать так:
1. Делаете репозиторий приватным, создаете в нем ветку dev
2. Проверенному человеку даете доступ через collaborators
3. Человек редактирует код в ветке dev и делает пулл реквест (редактируя через клон или сразу на гитхабе, как сам решит)
4. После тестов CI в workflow вы этот пулл реквест мёржите в ветку master/main
5. После мёржа запускается workflow CD и деплоится на продакшн на ваш VPS.

В целом, такая концепция распространена))

Можно поставить размер шрифта в зависимости от размеров экрана, но через calc() задавать минимальное значение.

В этом примере ( codepen.io/paulradzkov/pen/jqYqgY ) размер шрифта заголовка никогда не будет меньше 16px (1em):

h1 {
    font-size: calc(1em + 4vw);
}

Можно использовать более сложные формулы совместно с @media. Тут размер шрифта плавно меняется от 14 до 18px в диапазоне от 480 до 1024px.

@media (min-width: 480px) and (max-width: 1024px) {
  p {
    font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) ));
  }
}

До 480 и после 1024px размер задан жестко с использованием @media.

Но в целом это все сложно и редко нужно. Я обычно задаю размер фиксированно на двух-трёх диапазонах при помощи @media.

UPD: можно даже заставить текст максимально заполнять площадь вьюпорта codepen.io/CrocoDillon/pen/fBJxu