Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ynazymko12/goit-js-finalproject
Homework for the course JavaScript📒 ---Event delegation. Receiving throttle and debounce---
https://github.com/ynazymko12/goit-js-finalproject
css3 goit goit-js-finalproject html5 javascript
Last synced: 11 days ago
JSON representation
Homework for the course JavaScript📒 ---Event delegation. Receiving throttle and debounce---
- Host: GitHub
- URL: https://github.com/ynazymko12/goit-js-finalproject
- Owner: YNazymko12
- Created: 2023-10-19T09:40:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-19T13:01:52.000Z (about 1 year ago)
- Last Synced: 2023-10-19T13:46:53.273Z (about 1 year ago)
- Topics: css3, goit, goit-js-finalproject, html5, javascript
- Language: JavaScript
- Homepage: https://ynazymko12.github.io/goit-js-finalproject/
- Size: 1000 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Фiнальний проєкт
# Критерії приймання фiнального проєкту
- Створено репозиторій `goit-js-finalproject`.
- Фiнальний проєкт містить два посилання: на вихідні файли і робочу сторінку на
`GitHub Pages`.
- В консолі відсутні помилки і попередження під час відкриття живої сторінки
завдання.
- Імена змінних і функцій - зрозумілі та описові.
- Код відформатований за допомогою `Prettier`.
## Стартові файли
- У [папці src](./src) знайдеш стартові файли з базовою розміткою і готовими
стилями. Скопіюй їх собі у проект. Для цього завантаж цей репозиторій як архів
або використовуй [сервіс DownGit](https://downgit.github.io/) для завантаження
окремої папки з репозиторія.
- Файл `gallery-items.js` містить масив `galleryItems`, який містить об'єкти з
інформацією про зображення: маленьке (прев`ю), оригінальне (велике) і опис. Ми
вже підключили його до кожного з JS-файлів проекту.
## Завдання 1 - галерея зображень
Створи галерею з можливістю кліку по її елементах і перегляду повнорозмірного
зображення у модальному вікні. Подивися демо відео роботи галереї.
https://user-images.githubusercontent.com/17479434/127711719-4e293f5b-fbaa-4851-8671-fc841963d961.mp4
Виконуй це завдання у файлах `01-gallery.html` і `01-gallery.js`. Розбий його на
декілька підзавдань:
1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і
наданого шаблону елемента галереї.
2. Реалізація делегування на `div.gallery` і отримання `url` великого
зображення.
3. Підключення скрипту і стилів бібліотеки модального вікна
[basicLightbox](https://basiclightbox.electerious.com/). Використовуй
[CDN сервіс jsdelivr](https://www.jsdelivr.com/package/npm/basiclightbox?path=dist)
і додай у проект посилання на мініфіковані (`.min`) файли бібліотеки.
4. Відкриття модального вікна по кліку на елементі галереї. Для цього ознайомся
з [документацією](https://github.com/electerious/basicLightbox#readme) і
[прикладами](https://basiclightbox.electerious.com/).
5. Заміна значення атрибута `src` елемента `![]()
` в модальному вікні перед
відкриттям. Використовуй готову розмітку модального вікна із зображенням з
прикладів бібліотеки [basicLightbox](https://basiclightbox.electerious.com/).
### Розмітка елемента галереї
Посилання на оригінальне зображення повинно зберігатися в data-атрибуті `source`
на елементі `![]()
`, і вказуватися в `href` посилання. Не додавай інші HTML теги
або CSS класи, крім тих, що містяться в цьому шаблоні.
```html
```
Зверни увагу на те, що зображення обгорнуте посиланням, отже по кліку за
замовчуванням користувач буде перенаправлений на іншу сторінку. Заборони цю
поведінку за замовчуванням.
### Закриття з клавіатури
> ⚠️ Наступний функціонал не обов'язковий для здавання завдання, але буде
> хорошою додатковою практикою.
Додай закриття модального вікна після натискання клавіші `Escape`. Зроби так,
щоб прослуховування клавіатури було тільки доти, доки відкрите модальне вікно.
Бібліотекаи [basicLightbox](https://basiclightbox.electerious.com/) містить
метод для програмного закриття модального вікна.
## Завдання 2 - бібліотека `SimpleLightbox`
Зроби таку саму галерею як в першому завданні, але використовуючи бібліотеку
[SimpleLightbox](https://simplelightbox.com/), яка візьме на себе обробку кліків
по зображеннях, відкриття і закриття модального вікна, а також гортання
зображень за допомогою клавіатури.
https://user-images.githubusercontent.com/17479434/127714821-4b7527c8-01db-42d3-83f0-8c1578561982.mp4
Необхідно трохи змінити розмітку картки галереї, використовуй цей шаблон.
```html
```
Виконуй це завдання у файлах `02-lightbox.html` і `02-lightbox.js`. Розбий його
на декілька підзавдань:
1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і
наданого шаблону елемента галереї. Використовуй готовий код з першого
завдання.
2. Підключення скрипту і стилів бібліотеки, використовуючи
[CDN сервіс cdnjs](https://cdnjs.com/libraries/simplelightbox). Необхідно
додати посилання на два файли: `simple-lightbox.min.js` і
`simple-lightbox.min.css`.
3. Ініціалізація бібліотеки після створення і додання елементів галереї у
`div.gallery`. Для цього ознайомся з документацією
[SimpleLightbox](https://simplelightbox.com/) - насамперед секції «Usage» і
«Markup».
4. Подивися в документації секцію «Options» і додай відображення підписів до
зображень з атрибута `alt`. Нехай підпис буде знизу і з'являється через 250
мілісекунд після відкриття зображення.
