Виконуй це завдання у файлах 01-gallery.html
і 01-gallery.js
.
У попередньому домашньому завданні ти самостійно створив/-ла галерею зображень, використовуючи делегування подій, і додав/-ла через CDN бібліотеку модальне вікно для відображення повнорозмірної версії зображення.
Створення галерей — це повсякденна задача розробника, але писати їх вручну кожного разу занадто трудомістко. Для цього існують бібліотеки, які реалізують усю логіку роботи галереї.
Зроби таку саму галерею, але використовуючи бібліотеку SimpleLightbox
, яка
повністю візьме на себе обробку кліків по зображеннях, відкриття і закриття
модального вікна, а також гортання зображень за допомогою клавіатури.
Зверни увагу на такі нюанси:
- Тобі більше не потрібно реалізовувати делегування подій, бібліотека SimpleLightbox сама буде відстежувати кліки по картках галереї.
- Бібліотека для створення модального вікна більше не потрібна, цей функціонал вбудований у бібліотеку SimpleLightbox.
Виконуй це завдання у файлах gallery.html
і gallery.js
. Розбий його на декілька
підзавдань:
Використовуй код з минулого домашнього завдання та виконай його рефакторинг. Не потрібно писати все з нуля. Наприклад, створення елементів галереї буде таким самим. А ось код делегування та відкриття модального вікна потрібно видалити.
Додай бібліотеку SimpleLightbox
як залежність проєкту, використовуючи npm
. Для
того щоб підключити CSS код бібліотеки в проєкт, необхідно додати ще один
імпорт, крім того, що описаний у документації.
Наступний крок це ініціалізація бібліотеки після створення і додання елементів
галереї у ul.gallery
. Для цього ознайомся з документацією SimpleLightbox
—
насамперед секції «Usage» і «Markup».
Після цього подивись у документації секцію «Options» і додай відображення підписів до зображень з атрибута alt. Нехай підпис буде знизу і з'являється через 250 мілісекунд після відкриття модального вікна.
Виконуй це завдання у файлах 02-form.html
і 02-form.js
.
Додай у HTML розмітку форми. У JS напиши скрипт, який буде зберігати значення полів у локальне сховище, коли користувач щось друкує.
Розбий його на декілька підзавдань:
- Використовуючи делегуваня, відстежуй на формі подію input і щоразу записуй у локальне сховище об'єкт з полями email і message, у яких зберігай поточні значення полів форми. Нехай ключем для сховища буде рядок `feedback-form-state`.
- Під час завантаження сторінки перевіряй стан сховища, і якщо там є збережені дані, то заповнюй ними поля форми. В іншому випадку поля повинні бути порожніми.
- Під час сабміту форми очищай сховище і поля форми, а також виводь у консоль об'єкт з полями email, message та їхніми поточними значеннями.