Skip to content

Instantly share code, notes, and snippets.

@kaineer

kaineer/components-list.md

Last active April 4, 2024 10:12
Show Gist options
  • Save kaineer/930a9e538b338fdb81451c1b4d674863 to your computer and use it in GitHub Desktop.
Save kaineer/930a9e538b338fdb81451c1b4d674863 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
components-list.md

Слайдер на базе Swiper

Фичи (простой вариант)

  • Переключение слайдов мышью
  • Переключение слайдов клавиатурой (.keyboard.enabled: true)
  • Кнопки для быстрого перехода к выбранному слайду
  • Поддержка touch events
  • Отображение количества слайдов
  • Свайпы (???)
  • Переключение между слайдами по таймауту

Тема: использование внешней библиотеки

Фичи (сложный вариант)

  • Отображение только на определенных разрешениях

  • Бесконечное перелистывание

  • Сложные выборки слайдов

  • Раскраска кнопок для выбора слайда

  • Одновременное перелистывание нескольких слайдеров

  • Тема: использование внешней библиотеки

Табы

Фичи (простой вариант)

  • Переключение видимости разделов

Фичи (сложный вариант)

  • Переключение в нужный таб по ссылке
  • Комбинация со Swiper
  • Дочерние табы

Выпадающий список (на базе select.js)

Фичи (простой вариант)

  • Выбор элемента
  • Мультивыбор
  • Блокировка select по условиям
  • Недоступные элементы для выбора
  • Иконки рядом с элементами
  • Динамическое наполнение данными

Фичи (сложный вариант)

  • Мультивыбор со вставкой значения в другой элемент
  • Отображение списка для выбора в зависимости от доступности пространства сверху/снизу
  • Поддержка работы с клавиатуры

Аккордеон

Фичи (простой вариант)

  • Переключение видимости разделов
  • Выбор количества доступных для открытия разделов. Автоматическое закрытие ранее открытых
  • Изменение вида кнопки для открытия
  • Изменение аккордеона в зависимости от размера окна

Фичи (сложный вариант)

  • Вложенные аккордеоны

Календарь (flatpickr)

Фичи (простой вариант)

  • Скрытие показ календаря

  • Просмотр календаря на месяц

  • Смена месяца

  • Выбор даты

  • Связь календаря с другим элементом на странице

  • Тема: использование внешней библиотеки

Фичи (сложный вариант)

  • Просмотр нескольких месяцев одновременно

  • Выбор диапазона

  • Доступные и недоступные даты

  • Тема: использование внешней библиотеки

Карта (yandex.map)

Фичи (простой вариант)

  • Настройка, изменение координат и масштаба

Фичи (сложный вариант)

  • Реакция на клик по метке

  • Динамический показ меток на карте

  • Кластеризация меток

  • Связь меток с другими элементами на странице

  • Тема: использование внешней библиотеки

Двойные ползунки (noUiSlider)

Фичи (простой вариант)

  • Перемещение ползунков. Ограничение перемещения

  • Закрашивание промежутка

  • Синхронизация с другими элементами

  • Тема: использование внешней библиотеки

Тултипы

Фичи (простой вариант)

  • Показ при наведении курсора

  • Статичное содержимое

  • Тема: События в DOM

  • Тема: Модификация DOM

  • Содержимое по сети

  • Тема: Работа с сетью

Фичи (сложный вариант)

  • Изменение координат в зависимости от доступного места

Тема: Получение параметров из DOM браузера

Загрузка файлов/загрузка изображений

Фичи (простой вариант)

  • Загрузка одного файла
  • При нажатии по кнопке
  • Превью загруженных изображений
  • Удаление файла из списка загружаемых
  • Валидация файлов

Фичи (сложный вариант)

  • Перетаскивание файлов в дропзону

  • Тема: События в DOM

  • Тема: FileAPI

data-атрибуты

Фичи (простой вариант)

  • Передача настроек и поведения через dataset

  • Тема: Модификация DOM

Модальное окно

Фичи (простой вариант)

  • Открытие модального окна

  • Лок скролла при открытии (?)

  • Фокус устанавливается на кнопку закрытия

  • Закрытие по клику на кнопку

  • Закрытие по клику по оверлею

  • Тема: События в DOM

  • Тема: Модификация DOM

Фичи (сложный вариант)

  • Вызов другого модального окна и перемещение между ними (?)

Валидация формы

Фичи (простой вариант)

  • Показ сообщений об ошибках

  • Пометка неправильно введенных полей классом

  • Сообщения об ошибке зависят от поля и значения

  • Валидация всей формы или одного поля

  • Ограничение на размер загружаемого поля

  • Для необязательных полей валидация только если поле не пустое

  • Тема: Использование внешних библиотек

  • Тема: Модификация DOM

  • Тема: Функции

Фичи (сложный вариант)

  • Валидация по матрице (шаблону)
  • Ограничение по сложному регэкспу

Тема: Регулярные выражения

Лоадеры

Фичи (простой вариант)

  • Анимированные лоадеры (простая анимация)

  • К скорости загрузки не привязан

  • Блокирует и "собирает" страницу

  • Тема: События в DOM (onload)

  • Тема: Модификация DOM

Фичи (сложный вариант)

Поэкранки

// Пока не понятно, входит ли в состав курса

Бургер

Фичи (простой вариант)

  • Появление/скрытие

  • Лок скролла при открытии (?)

  • Закрытие при нажатии Esc

  • Тема: События в DOM (onload)

  • Тема: Модификация DOM

Прилипающая шапка

Фичи (простой вариант)

  • Шапка доступна вне зависимости от скролла

Фичи (сложный вариант)

  • Изменение содержимого шапки в зависимости от показываемого блока

  • Бэкскролл

  • Тема: События в DOM

  • Тема: Модификация DOM

Двух-трехуровневое меню

Фичи (простой вариант)

  • Переход на следующий уровень по Enter (?)

  • Тема: События в DOM

  • Тема: Модификация DOM

Баннер

Фичи (простой вариант)

  • Покрытие и скрытие баннера

  • Запоминание выбора пользователя

  • Тема: События в DOM

  • Тема: Модификация DOM

  • Тема: Работа с кукисами

Одинарный ползунок

Фичи (простой вариант)

  • Получение значения из нативного range и вывод в другом элементе
  • Подстановка значения из поля ввода в нативный range

Фичи (сложный вариант)

  • Синхронизация положения кнопки ползунка и другого элемента

  • Тема: События в DOM

  • Тема: Модификация DOM

 Форма для настройки параметров изображения

  • Изменение масштаба изображения
  • Выбор эффекта, настройка количественного параметра эффекта, применение эффекта к изображению
  • Добавление текстового комментария
  • Добавление хэштегов
  • Тема: Основы Javascript
  • Тема: События в DOM
  • Тема: Модификация DOM

 Валидация полей формы для настройки параметров изображения

Фичи

  • изменение масштаба
  • наложение эффекта
  • хэштеги
  • текстовый комментарий
  • Тема: События в DOM
  • Тема: Модификация DOM

 Отрисовка списка загруженных изображений

Фичи (до загрузки данных по сети)

  • отображение списка из тестовых данных
  • миниатюра загруженного изображения отображается в DOM-элементе, склонированном из шаблона
  • клик по миниатюре приводит к открытию формы предпросмотра изображения
  • Тема: События в DOM
  • Тема: Модификация DOM

Фичи

  • отработка ситуации, когда запрос на загрузку возвращает ошибку
  • загрузка списка изображений с отрисовкой после загрузки
  • Тема: Работа с сетью

 Переключение режима сортировки

Фичи (простой вариант)

  • выбор способа сортировки
  • вывод списка по выбранному алгоритму
  • устранение дребезга (ситуации, когда сортировку меняют слишком часто)
  • Тема: События в DOM
  • Тема: Модификация DOM
  • Тема: Обработка "дребезжания", работа с timeout-ами
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment