Это тестовое задание не имеет никаких технических ограничений. Ты можешь использовать любые инструменты. Делай так, как ты считаешь, будет правильно и хорошо.
Нужно сверстать страницу по макету по принципу mobile-first.
Примечания:
- Если времен больше чем на 1 строчку, то в конце строчки должна появиться кнопка "ещё..." при нажатии на которую будут раскрываться скрытые времена.
- Под ценой может не быть надписи "1200₽ на причале" в таком случае цена должна быть выровнена посередине относительно копки "подробнее"
✅ Решение:
В текст статьи на странице с адаптивной версткой менеджеры добавили таблицу. На десктопе таблицы выглядят хорошо, но на мобиле - появляется горизонтальный скролл, верстка едет. Что делать?
✅ Решение: - Для данной таблицы (с текстом) можно добавить оверлей, скрывающий границы и подстраивающийся под верстку, при этом для самой таблицы добавить возможность горизонтальной прокрутки. Так же можно было бы для мобильных расширений элементы строки таблицы объеденить в отдельную карточку, но это больше подходит для таблицы с характеристками объека.
После успешной покупки билетов на событие, данные попадают в список заказов. Список заказов сохраняется в таблице phpMyAdmin в виде:
| id | event_id | event_date | ticket_adult_price | ticket_adult_quantity | ticket_kid_price | ticket_kid_quantity | barcode | user_id | equal_price | created |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 003 | 2021-08-21 13:00:00 | 700 | 1 | 450 | 0 | 11111111 | 00451 | 700 | 2021-01-11 13:22:09 |
| 2 | 006 | 2021-07-29 18:00:00 | 1000 | 0 | 800 | 2 | 22222222 | 00364 | 1600 | 2021-01-12 16:62:08 |
| 3 | 003 | 2021-08-15 17:00:00 | 700 | 4 | 450 | 3 | 33333333 | 00015 | 4150 | 2021-01-13 10:08:45 |
Где:
id- инкрементальный порядковый номер заказаevent_id- уникальный ид события. У каждого события есть свое название, описание, расписание, цены и свой уникальныйevent_idсоответственноevent_date- дата и время на которое были куплены билетыticket_adult_price- цена взрослого билета на момент покупкиticket_adult_quantity- количество купленных взрослых билетов в этом заказеticket_kid_price- цена детского билета на момент покупкиticket_kid_quantity- количество купленных детских билетов в этом заказеbarcodeуникальный штрих код заказаequal_price- общая сумма заказаcreated- дата создания заказа
Вопросы:
-
Некоторые события нужно продавать с дополнительными типами билетов - льготный и групповой, у которых будут свои цены и название. Имеется информация, что вероятно, будут другие типы билетов, которые нужно будет добавить. Нужно уметь сохранять при заказе 2 дополнительных типа билета, льготный и групповой в бд. Задача - Показать конечный вид таблицы с добавленными типами билетов. Объяснить свое решение.
✅ Решение: - Добавление стлобца с категорией и столбца с ценой для каждого типа билета.
| id | event_id | event_date | ticket_adult_price | ticket_adult_quantity | ticket_kid_price | ticket_kid_quantity | ticket_benefit | ticket_benefit_quantity | ticket_group | ticket_group_quantity | barcode | user_id | equal_price | created |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 003 | 2021-08-21 13:00:00 | 700 | 1 | 450 | 0 | 600 | 0 | 2000 | 0 | 11111111 | 00451 | 700 | 2021-01-11 13:22:09 |
| 2 | 006 | 2021-07-29 18:00:00 | 1000 | 0 | 800 | 2 | 900 | 0 | 2500 | 0 | 22222222 | 00364 | 1600 | 2021-01-12 16:62:08 |
| 3 | 003 | 2021-08-15 17:00:00 | 700 | 4 | 450 | 3 | 600 | 0 | 2000 | 0 | 33333333 | 00015 | 4150 | 2021-01-13 10:08:45 |
-
Часто посетители из одного заказа приходят не одновременно на события. Возникает необходимость чекинить их по отдельности. Для этого у каждого билета должен быть свой баркод. Если в одном заказе было куплено несколько билетов, 2 взрослых, 3 детских, 4 льготных - то должно быть 9 баркодов для каждого билета соответственно. Задача - Показать конечный вид таблицы, где у каждого билета свой баркод. Объяснить свое решение.
✅ Решение: - Добавление стлобца с идентификатором количества, для каждого билета отдельная строка таблицы, к баркоду события добавляется идентификатором количества. ( barcode = barcode + (quantity_id) ).
| id | event_id | event_date | quantity_id | ticket_adult_price | ticket_adult_quantity | ticket_kid_price | ticket_kid_quantity | ticket_benefit | ticket_benefit_quantity | ticket_group | ticket_group_quantity | barcode | user_id | equal_price | created |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 003 | 2021-08-21 13:00:00 | 1 | 700 | 1 | 450 | 0 | 600 | 0 | 2000 | 0 | 11111111(1) | 00451 | 700 | 2021-01-11 13:22:09 |
| 2 | 006 | 2021-07-29 18:00:00 | 1 | 1000 | 0 | 800 | 1 | 900 | 0 | 2500 | 0 | 22222222(1) | 00364 | 1600 | 2021-01-12 16:62:08 |
| 3 | 006 | 2021-07-29 18:00:00 | 2 | 1000 | 0 | 800 | 1 | 900 | 0 | 2500 | 0 | 22222222(2) | 00364 | 1600 | 2021-01-12 16:62:08 |
| 4 | 003 | 2021-08-15 17:00:00 | 1 | 700 | 1 | 450 | 0 | 600 | 0 | 2000 | 0 | 33333333(1) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 5 | 003 | 2021-08-15 17:00:00 | 2 | 700 | 1 | 450 | 0 | 600 | 0 | 2000 | 0 | 33333333(2) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 6 | 003 | 2021-08-15 17:00:00 | 3 | 700 | 2 | 450 | 1 | 600 | 0 | 2000 | 0 | 33333333(3) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 7 | 003 | 2021-08-15 17:00:00 | 4 | 700 | 2 | 450 | 1 | 600 | 0 | 2000 | 0 | 33333333(4) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 8 | 003 | 2021-08-15 17:00:00 | 5 | 700 | 2 | 450 | 1 | 600 | 0 | 2000 | 0 | 33333333(5) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 9 | 003 | 2021-08-15 17:00:00 | 6 | 700 | 2 | 450 | 0 | 600 | 1 | 2000 | 0 | 33333333(6) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 10 | 003 | 2021-08-15 17:00:00 | 7 | 700 | 2 | 450 | 0 | 600 | 1 | 2000 | 0 | 33333333(7) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 11 | 003 | 2021-08-15 17:00:00 | 8 | 700 | 2 | 450 | 0 | 600 | 1 | 2000 | 0 | 33333333(8) | 00015 | 4150 | 2021-01-13 10:08:45 |
| 12 | 003 | 2021-08-15 17:00:00 | 9 | 700 | 2 | 450 | 0 | 600 | 1 | 2000 | 0 | 33333333(9) | 00015 | 4150 | 2021-01-13 10:08:45 |
Известно расписание отправления теплохода по московскому времени (GMT+3):
-
из A в B:
- 2021-08-21 18:00:00
- 2021-08-21 18:30:00
- 2021-08-21 18:45:00
- 2021-08-21 19:00:00
- 2021-08-21 19:15:00
- 2021-08-21 21:00:00
-
из B в A:
- 2021-08-21 18:30:00
- 2021-08-21 18:45:00
- 2021-08-21 19:00:00
- 2021-08-21 19:15:00
- 2021-08-21 19:35:00
- 2021-08-21 21:50:00
- 2021-08-21 21:55:00
"из A в B" и "из B в A" стоимость одного билета 700р.
"из A в B и обратно в А" стоимость составного билета 1200р
Время пути в одну сторону 50 минут.
Задача. Сделать страницу (дизайн не имеет значения) на которой пользователь выбрав направление, время и количество билетов сможет посчитать итоговые значения: общую стоимость, время в пути.
Как это должно выглядеть?
На странице пользователь сначала должен выбрать направление:
<select name="route" id="route">
<option value="из A в B">из A в B</option>
<option value="из B в A">из B в A</option>
<option value="из A в B и обратно в А">из A в B и обратно в А</option>
</select>
После чего предлагается пользователю выбрать время. Важно, время показываем в часовом поясе пользователя. Предположим, что на всех его устройствах стоит запрет перевода времени в локальный часовой пояс.
<label for="time">Выберите время</label>
<select name="time" id="time">
<option value="18:00(из A в B)">18:00(из A в B)</option>
<option value="18:30(из A в B)">18:30(из A в B)</option>
<option value="18:45(из A в B)">18:45(из A в B)</option>
<option value="19:00(из A в B)">19:00(из A в B)</option>
<option value="19:15(из A в B)">19:15(из A в B)</option>
<option value="21:00(из A в B)">21:00(из A в B)</option>
<option value="18:30(из B в A)">18:30(из B в A)</option>
<option value="18:45(из B в A)">18:45(из B в A)</option>
<option value="19:00(из B в A)">19:00(из B в A)</option>
<option value="19:15(из B в A)">19:15(из B в A)</option>
<option value="19:35(из B в A)">19:35(из B в A)</option>
<option value="21:50(из B в A)">21:50(из B в A)</option>
<option value="21:55(из B в A)">21:55(из B в A)</option>
</select>
Если выбрано время "из A в B и обратно в А", то должен показаться дополнительный селект, в котором можно будет выбрать обратное время. Обратите внимание, что время не должно пересекаться. Это значит, что следует учитывать, что если путь из А в В был выбран в 14:00, то обратный путь возможен только по прибытию на место в пункт В.
Далее ползователю прелагается выбрать количество билетов и нажать на кнопку "посчитать".
<label for="num">Количество билетов</label>
<input id="num">
<button>Посчитать</button>
При клике на кнопку "Посчитать" показать результат с направлением, временем в пути, временем отправления и временем прибытия в часовом поясе пользователя.
Например:
Вы выбрали 4 билета по маршруту из A в B стоимостью 4000р.
Это путешествие займет у вас 40 минут.
Теплоход отправляется в 12-00, а прибудет в 18-00.
✅ Решение:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent