Задание

Используя HTML, CSS, TypeScript, React, Redux, Node.js и Webpack необходимо с чистого листа создать сайт, на который будет выведен компонент “Select”, кнопка “Отправить” и сообщение о результатах выполнения запроса на сервер.

Набор опций для компонента “Select” должен загружаться с сервера при старте работы сайта в ответ на запрос типа GET по адресу "/options/for/select" с ответом в формате JSON вида:

Набор опций для компонента “Select” должен загружаться с сервера при старте работы сайта в ответ на запрос типа GET по адресу /options/for/select с ответом в формате JSON вида:

[
  {
    "name": "Видимое в селекте название опции",
    "value": "Значение выбранной опции, которое будет передаваться на сервер"
  }
]

Значения для "name" и "value" пусть представляют из себя числа от 1 до 1000 в формате строк.

После того, как опции для компонента “Select” будут с сервера загружены и он будет выведен на экран, пользователь может выбрать любую опцию в компоненте “Select” и нажать на рядом расположенную кнопку “Отправить”.

После нажатия на кнопку “Отправить” на сервер должен быть отправлен запрос типа POST по адресу /selected/option с данными в формате JSON вида:

{"value": "Значение выбранной в селекте опции"}

В ответ сервер должен прислать данные в формате JSON вида:

{"message": "Выбранная опция <тут вставить число полученной опции> успешно принята."}

Полученное от сервера сообщение нужно вывести на экран в виде простой строки под компонентом “Select” и кнопкой “Отправить”.

В случае возникновения ошибки во время соединения с сервером нужно предусмотреть вывод под компонентом “Select” и кнопкой “Отправить” сообщения о возникшей ошибке в виде простой строки.

Стоит учесть также ситуацию, когда сервер вместо массива с данными для компонента “Select” может прислать пустой массив [ ], а также просто какие-либо неверные данные, например просто null.

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

Требования к внешнему виду, функционалу и коду компонентов

Требования к сообщениям, выводимым под компонентом “Select” и кнопкой “Отправить”

Данный компонент должен быть разработан самостоятельным и независимым. То есть при желании в нем можно будет вывести любое текстовое сообщение или вывести на экран сразу несколько таких компонентов с разными текстами, подобно тому, как это можно сделать с помощью стандартных тэгов <p>.

Сообщение – это простая строка. Шрифт и размер шрифта на ваш выбор. Цвет черный.

Примеры.

Требования к кнопке “Отправить”

Данный компонент должен быть разработан самостоятельным и независимым. То есть при желании на экран можно будет вывести сразу несколько кнопок с разными названиями и разными функционалом, который будет запускаться при клике по ним, подобно тому, как это можно сделать с помощью стандартных тэгов <button>.

При создании кнопки вы не должны использовать стандартный HTML-тэг <button>.

Вам нужно создать собственный аналог этого стандартного тэга со всем присущим для него функционалом по наведению на него курсора мыши, клику мышкой, переходу на него при нажатии на кнопку Tab на клавиатуре и реакцию на нажатие на кнопку Enter на клавиатуре.

Визуально кнопка представляет из себя прямоугольник со скругленными уголками. Радиус закругления 3 px.

Толщина рамок 1 px в неактивном состоянии и 2 px при наведении курсора мыши или фокусировке на кнопке после перехода на неё при нажатии на кнопку Tab на клавиатуре.

Цвет рамок имеет код 0066cc.

Цвет текста внутри кнопки также имеет код 0066cc.

Шрифт и размер шрифта на ваш выбор.

Примеры.

Кнопка в неактивном состоянии.

Кнопка при наведении на нее курсора мыши.

Требования к компоненту “Select”

Данный компонент должен быть разработан самостоятельным и независимым. То есть при желании на экран можно будет вывести сразу несколько селектов с разным содержимым, подобно тому, как это можно сделать с помощью стандартных тэгов <select>.

При создании компонента “Select” вы не должны использовать стандартный HTML-тэг <select>.

Вам нужно создать собственный аналог этого стандартного тэга со всем присущим для него функционалом по наведению на него курсора мыши, клику мышкой, переходу на него при нажатии на кнопку Tab на клавиатуре и реакцию на нажатие на кнопку Enter на клавиатуре, а также добавить переход вверх-вниз по выпадающим опциями при нажатии на стрелки вверх и вниз на клавиатуре.

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

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

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

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

Ширина всего компонента “Select” составляет 250 px.

Высота на ваш вкус с учетом того, что в закрытом состоянии высота компонента “Select” должна быть равна высоте рядом расположенной кнопки “Отправить”.

Максимальная высота самого выпадающего списка не более 250 px. То есть она может быть меньше, если число опций в списке будет меньше, например, всего две.

Шрифт и размер шрифта на ваш выбор. Цвет шрифта черный.

Толщина рамок компонента “Select” составляет 1 px. Цвет рамок имеет код f0f0f0.

Однако в раскрытом состоянии или при наведении на закрытый блок селекта курсора мыши, а также при переходе на него с помощью нажатия на кнопку Tab на клавиатуре толщина нижней рамки блока с выбранной опцией должна составлять 2 px и иметь код цвета 0066cc.

Опции выпадающего списка не имеют рамок. Цвет фона у всех опций белый. Цвет шрифта черный.

Но опция, на которую навели курсор мыши, имеет код цвета фона f0f0f0.

Опция, на которую переместились с помощью нажатия на стрелку на клавиатуре, имеет код цвета фона e8e8e8.

А текущая выбранная опция имеет код цвета фона dedede.

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

То есть, если в поле ввода ввели цифру 1, то в выпадающем списке должны остаться опции, начинающиеся на цифру 1 (пример: 1, 11, 12 …, 100, 101, …, 1000). Если далее ввели цифру 2, то остаться должны только опции, начинающиеся на 12 в своих названиях (пример: 12 …, 120, 121, …, 129).

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

Справа от поля ввода должна располагаться небольшая кнопка “x” (крестик), клик мышкой по которой должен приводить к очистке поля ввода. (Так же все символы в поле ввода можно удалить естественным путем, нажав на кнопку Backspaсe или Del на клавиатуре.)

Кнопка “x” должна быть видна только при наведении на блок с выбранной опцией курсора мыши. В остальное время эта кнопка должна быть скрыта и неактивна. Дизайн кнопки оставляется на ваше усмотрение. Визуально это просто крестик.

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

Также открытый блок опций должен закрываться при клике мышкой вне компонента “Select”, а также при уводе с него фокуса при нажатии на кнопку Tab на клавиатуре.

К закрытию списка опций также приводит клик по опции в выпадающем списке и нажатие на кнопку Enter на клавиатуре, если мы переместились на какую-нибудь опцию с помощью нажатия на кнопку вверх или вниз на клавиатуре.

Раскрытие же блока должно производиться при клике на компонент “Select” мышью или при нажатии на кнопку Enter на клавиатуре, после фокусировки на компоненте при помощи кнопки Tab.

Итоговый порядок работы программы

1) Загрузили с сервера набор опций для формирования селекта.

2) Вывели на экран селект с кнопкой “Отправить”.

3) Выбрали в селекте опцию.

4) Нажали на кнопку “Отправить”.

5) Отправили на сервер value выбранной в селекте опции.

6) Получили в ответ от сервера сообщение об успехе или ошибке, если связь с сервером прервалась.

7) Вывели сообщение об успехе или ошибке под селектом и кнопкой “Отправить”.

Публикация кода

Код сайта, который вы создадите при выполнении данного задания, опубликуйте на сайте GitHub п пришлите нам ссылку для просмотра результата вашей работы.