Правила сдачи задания:
- Важно: в рамках этого ДЗ можно использовать любой менеджер пакетов
- Вы можете сделать все три задачи в одном репозитории и показать работу всех трёх виджетов на одной странице. Ключевое, чтобы все виджеты были оформлены в виде отдельных классов.
- Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через Appveyor
- В README.md должен быть размещён бейджик сборки и ссылка на Github Pages
- В качестве результата присылайте проверяющему ссылки на ваши GitHub-проекты
- Авто-тесты писать не требуется
В рамках реализации большого портала вам необходимо сделать виджет "collapsible"-контейнеров, который может разворачиваться и сворачиваться.
Подобный виджет есть в рамках Bootstrap, но как мы с вами "знаем": "jQuery не нужен", поэтому вам нужно реализовать такой же виджет на чистом JS.
Авто-тесты на данную задачу не нужны.
Важно: эта задача не является обязательной. Её (не)выполнение не влияет на получение зачёта по ДЗ.
Вам поставили задачу сделать виджет обратной связи на портал компании. Необходимо это сделать. Ключевое тут, конечно же, анимации - поскольку всё остальное вы уже умеете.
Реализуйте показ и скрытие, как это отображено на картинке:
Обратите внимание, что при нажатии на кнопку, сама кнопка тоже исчезает, а при скрытии формы - появляется.
Длительность анимации, использованная в оригинале, - 100ms, функция анимации - linear.
Организуйте код в виде виджета, готового к установке через базовый контейнер в html и инициализацию.
Авто-тестов на данную задачу не нужно.
Важно: эта задача не является обязательной. Её (не)выполнение не влияет на получение зачёта по ДЗ.
Все любят кнопки лайков, вам поручили реализовать одну из них.
Реализуйте поведение, указанное на картинке:
Данные для анимации:
- Изображение -
- Высота, на которой исчезают лайки - 200px
- Макс. отклонение влево/вправо - 50px
- Скорость анимации - 500ms
- Функция анимации - ease-out (можете использовать другую)
- Возможные траектории (траектория выбирается рандомно):
- 0% - центр, 25% - влево, 50% - центр, 75% - вправо, 100% - центр
- 0% - центр, 25% - центр, 50% - вправо, 75% - влево, 100% - центр
- 0% - центр, 25% - центр, 50% - влево, 75% - вправо, 100% - центр
- 0% - центр, 25% - вправо, 50% - центр, 75% - влево, 100% - центр
Важно: обратите внимание, что элементы после "исчезания" должны удаляться из DOM. Используйте для этого соответствующие события, а не таймауты.