Andrey Vasilev

Ничего не надо связывать, код написан правильно
Через useEffect ты можешь получить данные с сервера при рендере компонента

var accordionContainer = document.querySelector('.accordion__inner');

accordionContainer.addEventListener('click', function({target}) {
  if (target.classList.contains('accordion__btn')) {
    var answer = target.parentNode.nextElementSibling;
    answer.classList.toggle('active');
  }
});

Не имеет ограничений по времени хранения, может быть очищен пользователем вручную или браузером при переполнении автоматически (браузеры на основе движка WebKit, например Safari, очищают localStorage , если к нему не обращались в течение 7 дней).

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

Это спам или это нормальный пользователь

Спам

А если это спам, то что можно сделать, чтобы запретить спамерам свой спам отправлять?

reCaptcha
Contact Form7 + reCaptcha

Давно чистый JS не писал, могу ошибаться, но в целом вот:

const audio = document.createElement("audio");
const source = document.createElement("source");

audio.appendChild(source);
audio.setAttribute('autoplay', 'autoplay');
source.setAttribute('src', 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');

document.body.appendChild(audio)

window.addEventListener("load",function(){
    localStorage.setItem("audioCurrentTime", audio.currentTime);
    audio.currentTime = localStorage.getItem("audioCurrentTime");
});

Генерируем на странице всегда audio > source, подставляем нужные аттрибуты, так же храним время и перезаписываем/записываем его в локалстор перед и после перезагрузки. Таким образом можно скрипт подключить ко всем страницам и задать ему нужный трек, ну или тянуть его откуда-то.

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

Обход спецификации для тестирования:

You can disable the autoplay policy entirely by using a command line flag: chrome.exe --autoplay-policy=no-user-gesture-required. This allows you to test your website as if user were strongly engaged with your site and playback autoplay would be always allowed.

Почему музыка не играет сама: Autoplay policy in Chrome

ну вот к примеру:

document.querySelector('#demo').innerHTML = xhr.response.map((item) => `name: ${item.name}, email: ${item.email} <br>`);

как вариант:

const haveKey = users.some(item => item.id === newItem.id)

if (!haveKey) {
  users.push(newItem)
}
else {
 users.forEach((item, index) => {
   if (item.id === newItem.id) {
     users.splice(index, 1)
   }
 }) 
}

Example: Specifies a name element as required and an email element as required and a valid email address. A single message is specified for the name element, and two messages for email.

messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of name@domain.com"
    }
  }

В кратце: нужно ещё одно поле email, как я понял из доки.
email: { required, email }

Один из вариантов:

Я думаю можно подготовить условный список всех вариации модалок в массиве.
const modals = [ { type: 'auth', button: 'Войти' (или массив) }, action: 'login', {....} ], подключить в одном месте.
управлять всем этим делом соответственно в одном слайсе.

У меня так в проекте была реализована модалка по отображению тех. ошибок.
Аксиос отдавал определенную ошибку, я искал её в списке возможных и показывал соответствующую модалку с соответствующими действиями.

Пример:


Всё это дело можно расширять из одного места и как душе угодно.

const handleToggle = (id) => {
    setActive(id);
  };

<button className={`${s.brandBtn}`} onClick={handleToggle(i.id)}>
     {i.name}
</button>

<div className={active === i.id ? "" : `${s.dNone}`}>

.dropdown-items {
    display: flex;
    flex-wrap: wrap;
}

и с тегами и с тегами, которые имеют класс

if ($('#checkbox').is(':checked')){
	alert('Включен');
} else {
	alert('Выключен');
}

// Отметить checkbox
$('#checkbox').prop('checked', true);
 
// Снять checkbox
$('#checkbox').prop('checked', false);

настрой цепочку ACTIONS -> MUTATIONS -> GETTERS, после выполнения твоего запроса в mounted, тащи данные из геттера в computed, должно спасти ситуацию