Станислав

Например, так
добавить css:

#comp04 div .selected {
  background: #FF0000;
}

И заменить newColor:

function newColor(e) {
  const element = e.target;
  if (element.classList.contains('selected')) {
    e.target.classList.remove('selected');
  } else {
    e.target.classList.add('selected');
  }
}

Реакт нельзя просто подключить к обычному вебсайту, вам в этом случае нужен babel, babel как транспайлер переведет вам код из react либы в обычный js.

https://reactjs.org/docs/add-react-to-a-website.html промотать доку до низу

data-атрибуты должны непременно начинаться именно с "data-" с дефисом.

const sorted = (data, key) => Array
  .from(data, n => [ n, key(n) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);


document.querySelector('.result').append(...sorted(
  document.querySelector('.data').cloneNode(true).children,
  n => +n.innerText
));

Из NodeList можно сделать массив со всеми его методами: const arr = Array.from(myNodeList);
Значение внутри элемента div: const text = div.textContent;

function func1() {
  // сделать массив с этими дивами
  const divs = Array.from(document.querySelectorAll(".data > div"));

  // отсортировать, интерпретируя текст как числа
  divs.sort((a, b) => +b.textContent - +a.textContent);

  // куда их всех переставлять
  const result = document.querySelector(".result");

  // пока в массиве что-то есть, берём последний и вставляем в result
  while(divs.length) {
    result.appendChild(divs.pop());
  }
}
func1();

const res = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await res.json();
console.log(data)

Приветствую!

1) любые не примитивные переменные лучше создавать через const,
2) data атрибуты - хорошее решение для связывания каких-либо HTML элементов с их логикой JS,
3) у Вас в коде идентификатор товара data[key].Id равняется идентификатору кнопки. А что, если у Вас на странице будет несколько категорий товаров? В категории А есть id == 1, в категории Б тоже есть товар с id == 1. При этом у каждого товара из каждой категории идентичные кнопки. Все сломается.

Теперь насчёт реализации.

Я бы предложил сделать каждую карточку товара блоком с data атрибутом, который полностью идентифицирует этот блок, как карточку непосредственного товара. Предположим, cakes-1 (категория товара-идентификатор товара), конкретный вариант идентификации зависит от требований. Более того, такую логику следует выполнять на уровне всего проекта или, хотя бы, конкретного модуля проекта. Тогда можно избавиться от ненужных идентификаций кнопок «+» и «-». Оставить на них только data атрибуты «plus / minus». При клике смотреть на карточку товара (она, как вы помните, один из предков родителя в DOM дереве) и брать из этой карточки data атрибут, идентифицирующий её. Расшифровывая данный атрибут можно уже идти в объект с данными и доставать оттуда необходимый Вам объект.

Про модель. При обработке клика на + или - Вы должны пушить / попить (доставать) в/из массив(а) товары. После каждого пуша / попа Вы можете пересчитывать количество товаров в массиве и выводить это количество на экран (обновлять счётчик) ИЛИ увеличивать / уменьшать заранее созданную переменную (например, count). Второе решение быстрее, но в некоторых задачах может стать неподходящим за счёт своей «отвлеченности» от реальных данных (от вашего реального массива корзины).

На самом деле, реализация может быть (и будет) куда сложнее, потому что здравомыслящий человек с конкретными задачами в проекте будет пытаться свести всю разработку и поддержание кода к максимально декларативному стилю. То есть, например, я хочу добавить новый элемент в массив кнопок навигации и получить новую кнопку на странице во все местах, где она используется за 10 секунд, а не описывать ее HTML код в разных частях проекта. Для этого, у вас все отрисовки должны происходить на основе данных, а не на основе реализаций. То есть, если Вы захотите добавить новую кнопку список кнопок и для этого Вам достаточно будет описать ее в структуре данных для кнопок на уровне JS в соответствии с интерфейсом кнопки, значит все круто! Если же Вам приходится для добавления нового раздела описывать HTML код в пяти местах проекта, значит Ваша система будет, явно, стоить очень дорого / долго :)

Для скорости и гибкости используются фреймворки. И тут есть даже такая шутка: «если в проекте не используется фреймворк, разработчики пишут свой».

Успехов Вам!

Товары удобно держать в "словаре": ключ id, значение объект товара.
Корзину – как тоже "словарь": ключ id товара, значение – количество в корзине.
Количество товара стало 0 или меньше – удаляем ключ из Корзины.
Так всё становится довольно однозначно.

Отрендерить товары – нужна одна функция делающая для 1 товара из данных – HTML.
То же для товаров в корзине.

Нажали плюс-минус: меняется количество в Корзине, и её всю целиком заново рендерим.

Общий принцип: данные → отрисовка по ним UI → действия пользователя меняют данные (и далее по кругу).

data-атрибуты, наверное, лишние, раз и так вешаем прямо обработчик клика – в него же сразу и id товара пропишем.

попробуете урл

https://raw.githubusercontent.com/stn32/store-06/main/db/db.json

так обычно размешают код загружаемый как есть - "raw" - с гитхаб

The raw.githubusercontent.com domain is used to serve unprocessed versions of files stored in GitHub repositories. If you browse to a file on GitHub and then click the Raw link, that's where you'll go.

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

Это вариант для случая если функция getData необходима, там как можно просто воспользоваться fetch и передать в результат его выполнения функцию showData, не оборачивая fetch лишний раз в асинхронную функцию...
В функции showData не все ключи присутствуют в ответе, там уже сами решите что убрать, а что оставить

// get data
async function getData() {
  let result = await fetch("https://jsonplaceholder.typicode.com/posts")
    .then((response) => response.json());
// .then(json => console.log(json)) - эту строчку убираем, она приводила к тому, что fetch  не возвращал результат
  return result;
}

// show data
getData().then((result) => showData(result));
function showData(allGoods) {
  let outGoods = "";
  for (let key in allGoods) {
    outGoods += `
        <div class="goods__item">
            <a><img src="${allGoods[key].image}"/></a>
            <div class="goods__tx">
                <h2>${allGoods[key].name}</h2>
                <p>${allGoods[key].desc}</p>
                <span>${allGoods[key].availability}</span>
                <div class="goods__bottom">
                    <b>${allGoods[key].price} $</b>
                    <div class="goods__btn">
                        <button class="goods__minus" data-id="${key}">-</button>
                        <button class="goods__plus" data-id="${key}">+</button>
                    </div>
                </div>
            </div>
        </div>`;
  }
  let goodsContent = document.querySelector(".goods .container");
  goodsContent.innerHTML = outGoods;
}

Или:

const container = document.querySelector('.box');

container.addEventListener("click", ({ target: t }) => {
   if(t.classList.contains("btn")) {
       const card = t.closest(".item");
       card && card.classList.add("active");
   }
})

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

document.querySelectorAll('.item').forEach(v => {
   v.querySelector(".btn").addEventListener('click', () => {
      v.classList.add('active');
   });
});

Однако в целом такой подход не очень. То есть я хочу сказать что добавление обработчиков в цикле, имеет свои подводные камни, про которые можно найти достаточно информации.

https://youtu.be/H-UPHVjunOs

1. Зачем было оборачивать все еще в 1 функцию
2. Там цикл совсем не нужен внутри другой функции.
3. Можешь использовать style и добавлять туда % нужный в width, если нужны классы можно сделать 4 класса и добавлять их, используя так же счетчик который будет пополняться на 1 после каждого вызова, т.е кликнули 3 раза.
Сначала count = 1 поставили класс element.classList.add('line-active' + count

Вот рабочий пример

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="level">
    <div class="line">5%</div>
  </div>
  <button class="btn"></button>
</body>
</html>

<code lang="css">
.level {
  width: 100%;
  height: 50px;
  background: #eee;
}
.line {
  width: 10%;
  height: 50px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.line.active1 {
    transition: 0.3s;
    width: 25%;
}
.btn {
  width: 10%;
  height: 20px;
  background: red;
  margin-top: 15px;
}
</code>

let levelFull = document.querySelector('.line');
    let levelBtn = document.querySelector('.btn');
let startPercent = 5

function progressActive() {
    startPercent = startPercent + 25
    if (startPercent > 100) startPercent = 100
    levelFull.style.width = startPercent + '%'
    levelFull.textContent = startPercent + ' %'
 }

levelBtn.addEventListener('click', progressActive);

Создать новый шаблон, менять те файлы который новая верстка затрагивает, и мигрируете из старого файла в новый всю логику шаблона(которая нужна) из дефолтной темы.

Т.е там логика работате так, если мы добавляете шаблон header.tpl(пустой), то он игнорируется в шаблоне default, и подтягивается из вашего. Дефолтную тему лучше не трогать вообще.

catalog\language\en-gb\common\cart.php

Но там информация обновляется вроде как аяксом поэтому надо еще js скрипты править