Правила сдачи задания:
- Важно: в рамках этого ДЗ вы можете использовать любой пакетный менеджер
- Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через Appveyor.
- В README.md должен быть размещён бейджик сборки и ссылка на Github Pages
- В качестве результата присылайте проверяющему ссылки на ваши GitHub-проекты.
Есть замечательный фреймворк Bootstrap, в котором реализовано достаточно много интересных виджетов с использованием jQuery. Но, как говорят современные и модные программисты, "jQuery не нужен", поэтому вам нужно реализовать такой же виджет на чистом JS.
Вот так должен выглядеть виджет в целом, для упрощения будем считать, что виджет всегда должен показываться сверху.
У popover'а обязательно должно быть название и текст. Центрироваться он обязательно должен по горизонтали относительно элемента, который вызвал popover'а.
Не забудьте написать авто-тест на взаимодействие с DOM на базе Puppeteer или JSDOM (на ваш выбор).
Подсказка: страница, на которой можно "подглядеть" реализацию: https://getbootstrap.com/docs/4.3/components/popovers/. Но мы пока не проходили translate, translate3d, поэтому делайте позиционирование в px.
Важно: эта задача не является обязательной. Её (не)выполнение не влияет на получение зачёта по ДЗ.
Вы делаете CRM-систему, где в списке представлены товары, выглядеть это должно примерно так, как на скетче:
Вам нужно реализовать базовые операции CRUD (create, read, update, delete).
При нажатии на кнопку редактирования или добавления должно открываться всплывающее окно:
Обратите внимание, если вы нажимаете на кнопку "+" (добавить), то окно пустое, если вы нажимаете "✎" (редактировать), то поля заполнены.
Только после нажатия на кнопке "Сохранить", данные в таблице должны обновляться.
Обеспечьте валидацию данных: удостоверьтесь, что в полях название и стоимость есть текст, причём в поле стоимость допустимы только числа больше 0 (в памяти стоимость должна храниться в виде числа, а не в виде строки). Если ошибки присутствуют, отображайте их под полями ввода в виде текста (как было сделано в лекции).
Проверьте, что после редактирования, если нажать на кнопку добавить, то форма находится "в правильном" состоянии (нет сообщений об ошибках, т.к. пользователь ещё не взаимодействовал с формой).
При нажатии на кнопке "✕", строка должна удаляться (желательно с подтверждением в виде всплывающего окна (не alert/prompt/confirm) - но это не обязательно).
Все данные храните в памяти (в виде JS-объектов). DOM-дерево должно перестраиваться исходя из содержимого в памяти.
Не забудьте написать авто-тесты, разделив логику и взаимодействие с DOM. Для тестирования взаимодействия с DOM пользуйтесь Puppeteer.
Важно: эта задача не является обязательной. Её (не)выполнение не влияет на получение зачёта по ДЗ.
Вы делаете сервис для путешествий и вам необходимо реализовать виджет выбора дат: туда и (если установлена галочка туда-обратно) обратно.
Аналог вы можете посмотреть на сайте РЖД и любых авиакомпаний:
Вам нужно реализовать только переключатель туда-обратно и виджеты ввода дат/выбора их из календаря, в соответствии со следующими условиями:
- Дата "туда" должна быть не раньше, чем сегодняшняя дата (по времени браузера)
- Сегодняшняя дата должна быть выделена
- Даты до сегодняшней должны быть не активны
- Должно быть реализовано переключение месяца (без анимации, просто пересчёт дат)
- Дата "обратно" не может быть ранее даты "туда"
Для расчёта дат воспользуйтесь библиотекой moment js (обязательное условие). Установите и подключите её через npm/yarn.
Не забудьте написать авто-тесты, разделив логику и взаимодействие с DOM. Для тестирования взаимодействия с DOM пользуйтесь JSDOM или Puppeteer.