strelok011

Выбросить type number, написать свою валидацию на скажем yup или его аналоге.
И не тратить время.

если разговор про реализацию в React - то вопрос, какие именно инпуты используются в вашем проекте - контролируемые или нет?
Неконтролируемый uncontrolled

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

Контролируемый (а еще их называют тупыми) сontrolled

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);


  return <input type="text" value={email} onChange={handleInput} />;
}

Любая динамика с данными в окне браузера - нужен js. Работа в асинхронном режиме - таки да, это AJAX. Только сам термин ничего не объясняет.

Писать можно хоть на нативном js, можно подключать фреймворки типа jQuery, Vue, React и проч.
Вам придется хранить состояние формы (значения полей, ответы от бэкенда, служебные данные типа шага формы и др.), писать / использовать готовые модули для работы с календарем, отправлять запросы на эндпойнты бэкенда в асинхронном режиме, вешать крутилки (спиннеры) пока ожидается завершение запроса, перестраивать структуру документа чтоб отображать / скрывать шаги формы, писать валидацию заполнения данных, чтобы пользователь вводил только ожидаемые значения.
Готового "воткнул - работает" не найти, такие решения исключительно под конкретные требования пишутся.

попробуйте это

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}

.heatmap-wrapper - добавь в стиль атрибут pointer-events: none;

Основная проблема - ререндер компонента с промежуточной обработкой значения реактом.
Это не ошибка а ожидаемое поведение реакта, он теряет позицию курсора.
Можно посмотреть к примеру здесь как разработчики борются с таким поведением.
Общая идея - обрабатывать в onChange еще и положение курсора, сохранять его в стейте и использовать при ререндере.

Не нужно ничего вычислять. Ее нужно просто запросить. Это свойство clientHeight

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

Дополню немного куратора - ваше меню должно решать ВАШУ проблему.
Всякие образцы в интернете - могут решать а могут и не полностью. Работает ли адаптив для разных разрешений, поддерживается ли тач, сколько уровней вложенности, нужно ли скрывать скролл для длинных списков (и всё же меню - это именно список), нужно ли скрывать подменять десктопное меню на мобильное...
Когда составите список требований - тогда и только тогда нужно будет подбирать конкретную реализацию, либо опираясь на примеры пилить своё.
Халтура - она не универсальная :)

это вопрос 10-летия на js )
Я надеюсь, что клики по элементу массива и прочую мелочь вы написать сможете.

Берем массив, хотим изменить последовательность двух элементов
вариант со старым js

var b = list[y];
list[y] = list[x];
list[x] = b;

b - временная переменная

вариант на es6
к примеру массив arr = [1,2,3,4]
[arr[0], arr[1]] = [arr[1], arr[0]];
будет массив [2,1,3,4]
это destructuring assignment.

А так-то да, заказывайте на фрилансе :)

При создании анимаций необходимо избегать изменений цсс свойств, ведущих к перерисовке лейаута. Вот тут есть перечень всех свойств, вас должны интересовать помеченные фиолетовым.
Анимация без тормозов для смещения блока будет если вместо изменения положения на экране вида bottom: 0, bottom: 200 использовать transition: transform
Так же рекомендуется добавлять
transform: translate3d(0, 0, 0);
- заставляет некоторые устройства запускать аппаратное ускорение.

Аналитику в конец. Она не должна влиять на скорость подгрузки значимых элементов и блокировать страницу для пользователя.
SVG как раз лучше в начало, при этом можно поварьировать подход - ссылку на svg-спрайт, либо прямо инлайном запилить в html и вызывать в нужное место просто по id. Если у вас 10 ссылок на декоративные элементы - это плохой подход. На старых http серверах каждый запрос является высоконагруженной операцией для сервера.
Основной js - тоже в конец документа, в самый низ либо подключать асинхронно. Инициализация на документ онлоад.
Суть такого подхода - чем раньше пользователь увидит контент, тем спокойнее он будет и какой-нить гугл спидрейнч вам покажет влияние на первое отображение контента пользователю.
На истину не претендую, рекомендую всё же такой подход и проверку внесенных изменений у гугла.

Можно посмотреть сюда

Лучше переделать всё это на grid, с указанием gap. Один класс на обертке без всяких nth

Вы не сможете обойти блокировку из-за настроек параметров CORS (Cross-Origin Resource Sharing). Настраивается это на стороне серверов.
Есть сайты, специально настроенные для обеспечения такого доступа, обычно это какие-либо виджеты для сайтов.
Мечты "открыть на любом сайте форму любого другого сайта" запрещены (к счастью) во всех современных браузерах, иначе воровство денег и персональных данных ничем бы не сдерживалось.
https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

1. Для картинок есть такой тег как picture
Позволяет подгружать нужное изображение в зависимости от размера окна, подгружать различные форматы изображений, на случай если какой-то не поддерживается.
2. Что запрещает завернуть в медиа-запрос оба условия?

@media screen and (max-width: 767px) {   
    .img{
    	background-image: url(http://...);
    } 
}

@media screen and (min-width: 768px) {      
    .img{      
    	background-image: url(http://...);
    } 
}

Пишете небольшой js для получения высоты своей страницы (ну или элемента, на котором должен проявляться эффект) после загрузки, добавляете инициализацию этого же кода на resize (мало ли как контент себя поведет), используете это значение для анимации.
Если высота не известна - никакие транзишны и анимашки корректно работать не будут. Всякие аккордеоны, прокрутки и т.п. требуют заранее известной высоты для корректной работы. Браузер ее, к сожалению "на автомате" не подсовывает.
Решение не привожу, в интернете можно найти. Но общий смысл действий описал.

А кто вам разрешение выдал на изменение содержимого с чужого сайта?
https://developer.mozilla.org/ru/docs/Web/HTTP/CORS
"В целях безопасности браузеры ограничивают cross-origin запросы, инициируемые скриптами."

Когда вопрос задаете - лучше рассказывать и сопутствующие моменты. А еще - таблицу браузеров, под что совместимость пилить. И будет вам щасте )
Есть атрибуты стилей типа filter: blur, есть всевозможные эффекты через svg на том же механизме (примеров в инете навалом), а есть реализация супер дубовая и очень тяжеловесная, но совсем кроссбраузерная (фильтры в старых браузерах не везде работают) - создается канва, перехватывает битмап отрисованной страницы, библиотечкой на js успешно блюрится именно как растр.
Вот только если прячете текст - его надо блюрить на бэке. А на фронте - это просто не шибко полезные свистоперделки, которые еще и на производительности сказываются.