Задание специально составлено так, чтобы как можно больше разобраться в базовых технологиях при минимальном подключении каких-либо дополнительных средств. По сути, требуется только браузер и редактор кода; никаких предварительных манипуляций, без необходимости обработки на backend-стороне. Кому интересно ознакомиться с постановкой — добро пожаловать под кат.
Рекомендации к внешнему виду
Сверстать форму, состоящую из списка строк и панели фильтрации. Пример формы:
Особенности формы из примера:
• форма представляет собой блок фиксированной ширины по центру окна;
• панель фильтрации имеет фиксированную высоту, поля панели расположены горизонтально в одну-две линии;
• список строк растягивается во всю оставшуюся высоту окна, при количестве строк больше высоты отведенной списку появляется полоса прокрутки в самом списке (появление глобальной полосы прокрутки в окне браузера избегается).
Требования к функционированию
Строки списка и их содержимое генерировать при открытии страницы (случайное количество больше 200). Разметку и содержимое каждой строки собирать случайным образом из свойств, предварительно перечисленных в коллекциях констант в исходном коде (коллекции соответствуют фильтрам расширенного отбора под номерами 1, 2, 3, 4 (см. ниже); значения элементов и их количество в коллекции задает исполнитель). Случайный выбор элементов коллекций для сборки строк осуществлять на основе генерации случайных чисел (random).
В каждой строке списка предусмотреть:
1. атрибут идентификатора с уникальным значением, значение идентификатора вывести в начале содержимого строки;
2. случайный тег (из нескольких предусмотренных, например, label, span, div, p или подобные) со случайным классом (в CSS определить визуально отличимые классы, например, по цвету фона, шрифта или подобным) и вывести в содержимом название тега и его класса (приветствуется случайная подстановка сразу нескольких разных классов, в разном количестве, не меньше 1);
3. тег input со случайным типом (атрибут type), случайным значением (значение продублировать в title), случайным наличием/отсутствием отметки о заблокированности, случайным наличием/отсутствием отметки о доступности только на чтение.
На панели фильтрации предусмотреть переключение режима между отбором по идентификатору и расширенным отбором. После выбора значений на форме фильтрации в списке должны оставаться только подходящие записи:
1. в режиме отбора по идентификатору — строка у которой совпадает идентификатор;
2. в расширенном режиме — строки, каждая из которых соответствуют сразу всем выбранным опциям: первый тег, класс перого тега, тип тега input, значение тега input, признак заблокированности тега input, признак доступности только на чтение тега input.
При повторном изменении полей фильтрации в списке должны отображаться записи из исходного списка, подходящие для вновь выбранной конфигурации фильтра (фильтрация исходного списка должна происходить заново, исходные записи не должны потеряться).
В режиме отбора по идентификатору на панели фильтрации должно быть поле отбора по идентификатору строки (поле ввода).
В расширенном режиме на панели фильтрации должны быть следующие фильтры:
1. по первому тегу (выбор из коллекции);
2. по классу первого тега (выбор из коллекции);
3. по типу тега input (выбор из коллекции);
4. по значению тега input (выбор из коллекции);
5. по заблокированности тега input (выбор значений да/нет);
6. по доступности только на чтение тега input (выбор значений да/нет).
Дополнительно
* Приветствуется, чтобы фильтр реагировал на изменения сразу, без необходимости отдельного нажатия на кнопку поиска.
* Желательно всё сверстать аккуратно, поразбираться с css-свойствами и предусмотреть такие, чтобы верстка отдельных строк списка не ехала из-за различий содержащихся в них тегов (желательно брать разные теги: span, div, p и подобные). Ожидается, что всю форму (панель фильтрации, поля фильтрации, список, строки списка) удастся сверстать относительно примитивными тегами (div, ul, span и подобные) и классическими css-свойствами (position, display, margin, float и другими); использование table, flex, grid и прочих для описанного задания не оправдано (ничего против них не имею — просто задание не об этом).
** Реализовать отбор всех необходимых элементов одним селектором (отбирать сразу нужные теги, а не проверять каждую строку на предмет наличия выбранных свойств).
*** Постараться предусмотреть выбор нескольких значений для фильтров по первому тегу, по классу первого тега, по типу тега input, по значению тега input. Фильтр по первому тегу, типу тега input или значению тега input должен отбирать строки с любым из выбранных в нём значений (в каждом фильтре по отдельности; общее требование расширенного режима о соответствии строк сразу всем фильтрам сохраняется).
ссылка на оригинал статьи https://habr.com/ru/post/463277/
Добавить комментарий