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

Используя document.querySelectorAll('.list-group > a') ты создаешь NodeList (насколько я помню), а не массив. Соответственно, из этого ничего не выйдет.

В Vue, странно было бы, если бы не, работают весь необходимый арсенал JS.

Вот в отдельно взятом примере можешь поиграться, убирая document.querySelectorAll('.list-group > a') (т.е. создавая собственно массив).
https://codepen.io/i-am-studio_ru/pen/jOWmLry

В примере на лицо проблема вложенности. Чисто теоретически можно оформить все в одной строке на флексах, которую можно сортировать для специфического отображения на десктопе и на телефоне (порядок лого, выбора языка и всего остального).

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

Край — дублировать что-то. Например один и тот же выбор языка показывать вне блока с навигацией на телефоне, и внутри блока с order-ом на десктопе). Дублировать его будет дешевле, чем всю навигацию.

Ну а если под рукой доступен какой-нить JS-фреймворк, то совсем край можно просто рисовать разные компоненты (генерировать DOM) в зависимости от разрешения.

Привязать к полю onchange или oninout (а лучше через addEventListener) функцию, которая будет проверять на лету, и ее же можно к сабмиту формы шить.

Если сервер сконфигурирован правильно, то ты можешь обратить внимание в сторону fetch, который в настройках запроса позволяет без лишней головной боли поставить флаг no-cors.

https://developer.mozilla.org/ru/docs/Web/API/Fetc...

Чтобы захватить несколько элементов на странице надо использовать селектор, который собирает все (существующие на момент работы скрипта), например через querySelectorAll('.classname').

А затем проходится по массиву через forEach и к каждому привязывать то, что тебе нужно.

Ну и как выше указали, ID это уникальный идентификатор, вместо него надо использовать одинаковый класс.

Судя по описанное проблеме — API накрылось этим самым или просто написано криворуко, так как должно проходить расшифровку в формате на клиенте.

Если ты приложишь ссылку на API, где этот ответ можно посмотреть, сам ответ в формате разбора CURL или прямо в браузере, то можно сказать что-то более конкретное, сейчас же выглядит, как необходимость написать разрабам API, что у них все не очень хорошо на выходе.

1. Нус, можно использовать path.extname (предварительно включив его в исполняемый файл).
2. Можно засплитить по точке строку split('.'), и использовать последний элемент массива.
3. Просто регуляркой получать.

1. document.querySelectorAll этот код собирает МАССИВ элементов, если они есть.
2. Их надо перебирать, например через forEach и каждому задавать отображение.

3. Вот это дичь:

document.querySelectorAll('.block.clicked').image === 3

Если ты хочешь проверить КОЛИЧЕСТВО элементов, то вместо .image должен был использовать .length.

1. (elem, index, arr) второй и третий параметр необязательны.
2. .innerHTML — перезаписывает в тот же элемент все, что ты выводишь. Используй appendChild хотя бы.

https://tech.yandex.ru/maps/jsbox/2.1/suggest

Дешевле, ИМХО, скидывать эту работу на поисковики, которые:
1. Стабильно работают.
2. Имеют налаженный алгоритм поиска.
3. API.

В однофайловом компоненте используй корневой элемент svg. И будет тебе счастье.

А стили описаны в документации, передаются объектом в формате записи обычных стилей в JS (backgroundImage? например).

Открой консоль (внизу слева) и ты увидишь, что запрос по нажатию на кнопку происходит и прилетают данные. Осталось вывести.

UPD: после получения данных не происходит запуска отрисовки. Скрипт никогда не выведет новые данные, хотя их получает.

Дешево и сердито, использовать JS-фреймворк с роутами (Vue\React...). Можно и без роутов, на компоненте, тут не столь важно.

Долго и скорее всего не будет смысла — на JS без фреймворка: получать event.target и все несовпадающее элементы убирать. А этому давать класс, который раскрое скрытую информацию, или на JS добавит откуда-то (объекта в памяти или по get-запросу в API)

Читай документацию (актуальную в отличие от всяких уроков и статей) и эти ресурсы: https://learn.javascript.ru/ да https://developer.mozilla.org/ru/docs/Web/JavaScript. Первый вполне может дать необходимую базу, а второй в любом случае станет твоей настольной книгой (сомневаюсь, что в ближайшее время кто-то сможет вытолкнуть их из запросов.

Да, POST\PUT и т.д.

Веб-верстальщик = Frontend-developer.

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

Следовательно нельзя не знать HTML+CSS хотя бы на базовом уровне, чтобы считаться верстальщиком\фронтендером. Как нельзя и не знать JS. А остальное зависит от конкретного стека на рабочем месте (т.е. от поставленных задач).

ЗЫ: человек, который знает HTML и чуть CSS — это контент-менеджер.

Swipe расчитывается разницей между touchstart и touchend, например. В их случай надо делать корректировку на существенную разницу + движение в плоскости x, так как при прокрутке вниз\вверх, ты тоже получаешь разницу в оси Y.

Либо найти готовую либу (смыла мало, так как это всего ничего строк на проверке движения).

«Левая» же сторона экрана подчинена общей системе координат.

1. Слушай скролл.
2. Задавай условия изменения цвета (сколько проскролено).
3. Меняй цвет.

К бутстрапу это никакого отношения не имеет. Только JS.

Вот это body.style.overflow = "hidden" как раз и определяет отсутствие скролла.
Есть не заносить фиксированные размеры, то так можно вырубить скролл именно на этом самом месте. Осталось словить момент, когда это надо сделать.

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

Что-то типа диафильма?

1. «Ленту» вкладывай в «окошко», не снаружи.
2. Позиционируй без позицонирования (чтобы высота зависела от «ширины ленты»).
3. Обертке размеры по ширине + overflow:hidden;
4. Двигать можешь за счет transateX(-100% + [ширина окна]) → transateX(0);