Виконуй це завдання у файлах 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 та їхніми поточними значеннями.