Арсений Матыцин

SPA или контент на iFrame-ах.

А, о, я даже кажется по комментариям понял, что тебе надо. Стоит поработать над формулировками вопросов. Тем не менее:

let data = // JSON data → object
let dom_elem = document.getElementByQuery('somelem');
dom_elem.style.display = localStorage.getItem('domElemShow') ? localStorage.getItem('domElemShow') : data.domElemShow;
// Тернарник, который позволит загнать фолбэк при первичной отрисовке чего-либо на странице.

А дальше уже по событиям гонять данные в sessionStorage\localStorage\Cookies\IndexedDB.

Но это работает очень на поверхностном уровне, т.е. если тебе надо сочетать, скажем, пользователя и его данные, то потребуется бэк + DB + localStorage\Кукисы.

Тебе Codepen же в консоли и отвечает, в чем причина.

1. Переменные не были объявлены должным образом.
2. Ты пытался словить class, как ID

https://codepen.io/i-am-studio_ru/pen/OJMLLaK

Мы же ведь о компонентах, а не от балды накатанном теге? Впрочем не суть важно.

1. Не стоит завязывать в описании стилей на теге, так как ты себе таким образом стреляешь в ноги. Это все хорошо освоено в БЭМ-методологии, правда я не помню, чтобы кто-либо явно где-то писал, почему классу круче тегов. Если кратко, то это свобода, которая ограничивается лишь методологией и больной фантазией.
2. IE умер, помянем.
3. У меня к сожалению нет статистических данных, поэтому тут будет больше на общих знаниях и ощущениях: чтобы снизить риск быть непонятым, не стоит использовать малопупулярные подходы, а пользоваться простой семантикой (а иной раз «дублировать контент»), к тому же тег для спойлера есть.

Анимация на стороне CSS достигается через transition (в данном кейсе). До кучи можно почитать в принципе про переходы.

Передаваемый параметр e в функцию это event. У него есть свойства event.target (т.е. прямо в твоем случае e.target). Это и есть элемент, на который ты нажал. Через него и обращайся внутри функции.

Почти все теги обрезают строки. Для вывода сырого текста используются теги типа pre. В него и выводи свою портянку.

1. Получая массив ключей и обращаясь к объекту через первый ключ.
2. Либо с другой стороны но те же яйца.

1. Если на шкалу необходимо влиять, то использовать можно progress с последующей стилиазцией.
2. Значения заносить, проверять при изменении с помощью JS (в любом случае), для того, чтобы гонять между отображением в виде значения после запятой (чисел с запятой в математике на JS не существует) и значением в proress (которое скорее всего будет от 0% до 100%).
3. Фон, если он всегда ровным градиентом идет (от нуля к 50% и до 100%) можно залить просто фоном градиентом, если он имеет более сложную структуру, то вычислять и по параметрам рисовать все тот же линейный градиент (еще в принципе радиальный можно).

Повторяющиеся элементы выводятся с помощью циклов, на уровне бэкенда или фронтенда.

У тебя в руках скорее всего либо реально очень старый сайт, который писали руками с копированием, либо просто результат работы бэкенда.

В php это выглядело бы как-то так:

...
foreach (&items as $item) { ?>
[HTML-тело карточки товара со вставленными параметрами вида $item->title]

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

Итого, если у тебя проект с бэкендом, или фронтом, которые позволяет рисовать в цикле из базы или файла, используй язык. А если нужно просто 1 раз занести список, то можно это сделать в файле и обратить к генератору статики, например Jekyll.

Тебе стоит копнуть в обсерверы типа такого и такого. Либо пойти по пути наименьшего сопротивления и заюзать bind в либе jQuery, который умеет ловить события на элементах, которые досоздаются после загрузки DOM. Но это неточно, я несколько лет, как не имел дело с jQuery.

1. Есть JS-фрейморки, которые упрощают жизни в постройке такого, например Vue (в проекте же может быть использован React или Angular).
2. Форма должна иметь id (value) для БД и значение для пользователя (внутри тега option), для адекватного обмена данными и записи связей в БД. В референсе, кстати, эмуляция динамическая, сам selet со значениями скрыт.
3. На уровне данных для JS → объект, на уровне БД → связи один ко многим.

Кстати, так как марки автомобилей заранее известны, то это можно даже не заносить в базу, а хранить просто в объекте в конфигах, но по правде говоря вариант так себе, в базе проще объявления вязать по ID с марками.

Речь же о графическом редакторе, эдаком визивиге для заданного набора параметров. С ними все просто, рисуются с помощью JS и в нормальном подходе к разработке параметры, которые ты задаешь во всплывающих формах (дизайн не важен, речь о сути элемента интерфейса) сохраняется в объекте, к примеру:

{
    block: {
        borderColor: 'red',
        borderWidth: '15'
....

Который в дальнейшем преобразуется в стили, инлайновые или отдельным файлом, тут как бэк написан.
В редакторах сайтов, таких, как тильда и юкоз (насколько я помню) оно еще и отображается сразу.

Есть подобные редакторы и на WP, например в Unyson-е: принцип тот же, оформление попроще, блоками.

Таких редакторов много, у этого, к примеру, можно сразу посмотреть сконфигурированный объект.

Другая же категория → надстройка над сайтом, их задача — жестко, через important-ы поменять стили здесь и сейчас. Иногда, переключить тему, де-факто вызвать функцию бэка, которая это сделает, визуально же ты увидишь кубики с цветами.

1. В одну строку события (onsubmit) можно передать через точку с запятой несколько вызовов (как классы).
2. Не уверен, что после return-а будет работать, вообще на кой он тут, тут же прямо вызов функции, перед ней не нужны ретурны, и как результат можно прямо в функцию зашить вызов функции Я.Метрики.

Крайне кривая верстка и нежизнеспособная. В ее рамках можно сделать так.

label должен находится после input-а, тогда конструкция селекторов: input:checked + label позволит такое совершить. Либо завернуть текст в span и по то же конструкции, но вместо label обращаться к input:checked + span.

Либо по клику на чекбокс, меняй класс родителя на модификатор с необходимым фоном. Грубо, так:

if (element.checked) {
    parent.classList.remove('classname')
} else {
    parent.classList.add('classname')
}

тык

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

Я бы рекомендовал двинуть хотя бы в эту сторону. Чуть больше безопасности от самого себя.