Введение и цель проекта 0:00 Создание формы для поиска станций московского метро по названию. Использование московского метро из-за большого количества станций. Форма содержит одно поле для ввода названия станции.
Принцип работы формы 0:59 Автоматическая проверка названий станций на наличие введенных символов. Подсвечивание символов в найденных опциях. Пример использования: ввод "арбатская" показывает две станции с таким названием.
Структура проекта 1:54 Файл index.html содержит форму с полем ввода и списком станций. Файл style.css содержит стили. Файл index.js содержит код для работы с данными станций.
Получение данных станций 2:51 Использование метода fetch для получения данных станций. Преобразование данных в формат JSON. Создание массива станций из полученных данных.
Фильтрация станций 7:32 Создание функции для фильтрации станций по введенным символам. Использование регулярных выражений для проверки названий станций. Применение конструктора регулярных выражений для динамического шаблона.
Фильтрация станций метро 11:58 Использование метода меч для фильтрации станций метро по названию. Пример использования: передача массива станций и символов для фильтрации. Получение отфильтрованного массива станций, содержащих символы из поля импут.
Создание функции для отображения отфильтрованных данных 12:50 Создание функции для отображения отфильтрованных станций в списке опций. Использование метода мэп для отображения станций в HTML. Ограничение количества отображаемых опций до 10.
Подсвечивание символов в названии станций 21:04 Создание шаблона для подсветки символов из поля импут в названии станций. Использование метода реплейс для замены символов в названии станции. Проверка работы подсветки символов при вводе символов в поле импут.
Условия отображения опций 24:09 Проверка наличия символов в поле импут перед отображением опций. Отображение HTML-разметки только при наличии символов в поле импут. Завершение создания динамического поиска с использованием ванильного JavaScript.
