Алексей Уколов

Давайте вместе подумаем, почему ваш селектор, в котором чёрным по белому написано checkbox, не выбирает radio. Но есть вероятность, что придётся искать кого-то ещё и соображать на троих.

const anchors = [];

[...document.querySelectorAll('a')].forEach(($link) => {
    let href = $link.getAttribute(`href`);

    if (href.startsWith(window.location.href)) {
        href = href.split(window.location.href).join(``);
    }

    if (href.startsWith(window.location.pathname)) {
        href = href.split(window.location.pathname).join(``);
    }

    if (href !== `#` && href.startsWith(`#`)) {
        anchors.push({
            href,
            text: $link.textConent,
        });
    }
});

console.log(anchors);

let users = [];
let nameFilter = ``;

// TODO: Тут вы реализуете изменение значения nameFilter из какого-то поля и после этого снова вызываете render()

const render = () => {
    document.body.innerHTML = users
        .filter((item) => !nameFilter || item.name.toUpperCase().includes(nameFilter.toUpperCase())
        .map((item) => `<span class="name">${item.name}</span>`).join(``));
}

fetch(`users.json`)
    .then((res) => res.json())
    .then((data) => users = data)
    .then(render);

Никак - у массива в js нет ключей, есть только индексы, и сортировка по определению эти индексы меняет.
Вам нужно иметь две структуры: массив, который вы можете сортировать как хотите, и объект, где значению массива будет сопоставлен ключ.
Ну или хранить в массиве объект, у которого будет два поля: значение для сортировки и ключ.

получается так, что кнопка добавляется только к последней карточке

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

let panesList = document.querySelectorAll('.pane');
for (let pane of panesList) {
    let button = document.createElement('button');
    button.classList.add('remove-button');
    button.textContent = '[X]';

    pane.append(button);
}

Классическая потеря this. Правда, странно, что при этом нет ошибок в консоли, когда вы на window пытаетесь removeClass вызвать.

$(".box43z6r6QZ").click(function(){
   var $el = $(this);

    $el.addClass("hG8KlY3Q");

    setTimeout(function(){
        $el.removeClass("hG8KlY3Q");
    }, 1000);
});

<select>
  <option value="1" selected="selected">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<button>Reset</button>

const $select = document.querySelector('select');

document.querySelector('button').addEventListener('click', () => {
  $select.value = $select.querySelector('option[selected]').value;
});

Спред так не работает и вообще тут не нужен.

Нет и так было всегда.
Код js начинает исполняться в тот момент, когда парсер на него натыкается.

- document.querySelector('container');
+ document.querySelector('.container');

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

Дорогой "разработчик на React", то что вы хотите, написано на второй странице учебника javascript (а ещё в первом (и последующих) результате поисковой выдачи по заголовку вашего вопроса) и выглядит так: test[test2].

Да всё работает: https://codepen.io/alexey-m-ukolov/pen/RwqGRKj?edi...

В чём-то другом у вас ошибка.

Когда вы сравниваете число с массивом, какой вы ожидаете результат?

- i while(<= arr){
+ i while(<= arr.length){

Более того, цикл у вас бесконечный, потому что i в нём не изменяется, так что это даже и хорошо, что он не запускается.

Смотря о каком коде вы говорите. response.json() будет ждать окончания запроса, setCart будет ждать json, setPreloader будет ждать их обоих или падения.
Но если вы что-то напишете вне then, после fetch, оно ничего ждать не будет (если бы так работало, то зачем вообще нужен был бы then?).

Этот заголовок должен формироваться на клиенте, или этот заголовок формируют сами роботы?

Какая разница в рамках задачи?

Обработка такого заголовка на бэке производится в настройках самого сервера, или где-то в коде самого приложения?

Если веб-сервер может определить дату изменения сущности самостоятельно (например, речь про какой-то файл), то, конечно, лучше обрабатывать им. Но изменялась у вас карточка товара или нет, например, веб-сервер узнать не может, это знает только приложение.

useEffect(() => () => {
    if (countDown.current) {
      countDown.current.stop();
   }
}, []);

Т.е. операции по типу [[...arr], value] так же сработают по скорости и логике, как arr.push(value)?

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

У вас три страницы, на каждой из которых находится один из указанных id, а вы пытаетесь на каждой натравить Рекапчу на все три (двух из трёх на странице при этом нет), потому и получаете ошибку.
Либо подключайте на каждой странице свой скрипт только с одним id, который на ней присутствует, либо проверяйте элемент на существование:

if (document.getElementById('recaptcha1')) {
  grecaptcha.render('recaptcha1', {
    'sitekey': 'mysitekey',
    'callback': onRecaptchaSuccess,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000
  });
}

Ну это нормально - пока загрузятся css и js, пока они исполнятся. На всё это нужно время и до этого вам нужно самостоятельно стилизовать эту заглушку, чтобы она выглядела так, как вы хотите. А когда появляется класс slick-initialized, ваши стили должны отменяться или перебиваться Сликом.

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

.mobile-slick .privilege-card:first-child ~ .privilege-card {
  display: none;
}
.mobile-slick.slick-initialized .privilege-card:first-child ~ .privilege-card {
  display: inherit;
}