{"id":22177984,"url":"https://github.com/lesiaukr/goit-js-finalproject","last_synced_at":"2026-04-08T18:31:39.509Z","repository":{"id":202916449,"uuid":"708412362","full_name":"LesiaUKR/goit-js-finalproject","owner":"LesiaUKR","description":"Master JS final project - Throttle | debounce | lazy load","archived":false,"fork":false,"pushed_at":"2023-10-22T17:56:55.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T18:32:18.807Z","etag":null,"topics":["basiclightbox","css","gallery","html","javascript","js","modal-window","simple-lightbox","slider"],"latest_commit_sha":null,"homepage":"https://lesiaukr.github.io/goit-js-finalproject/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LesiaUKR.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-22T13:47:11.000Z","updated_at":"2023-11-02T16:52:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"1529dc52-2f17-466d-92a1-ed7b04b2a15b","html_url":"https://github.com/LesiaUKR/goit-js-finalproject","commit_stats":null,"previous_names":["lesiaukr/goit-js-finalproject"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LesiaUKR/goit-js-finalproject","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LesiaUKR%2Fgoit-js-finalproject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LesiaUKR%2Fgoit-js-finalproject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LesiaUKR%2Fgoit-js-finalproject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LesiaUKR%2Fgoit-js-finalproject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LesiaUKR","download_url":"https://codeload.github.com/LesiaUKR/goit-js-finalproject/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LesiaUKR%2Fgoit-js-finalproject/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31568599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basiclightbox","css","gallery","html","javascript","js","modal-window","simple-lightbox","slider"],"created_at":"2024-12-02T08:34:07.080Z","updated_at":"2026-04-08T18:31:39.487Z","avatar_url":"https://github.com/LesiaUKR.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Фiнальний проєкт\n\n# Критерії приймання фiнального проєкту\n\n- Створено репозиторій `goit-js-finalproject`.\n- Фiнальний проєкт містить два посилання: на вихідні файли і робочу сторінку на\n  `GitHub Pages`.\n- В консолі відсутні помилки і попередження під час відкриття живої сторінки\n  завдання.\n- Імена змінних і функцій - зрозумілі та описові.\n- Код відформатований за допомогою `Prettier`.\n\n## Стартові файли\n\n- У [папці src](./src) знайдеш стартові файли з базовою розміткою і готовими\n  стилями. Скопіюй їх собі у проект. Для цього завантаж цей репозиторій як архів\n  або використовуй [сервіс DownGit](https://downgit.github.io/) для завантаження\n  окремої папки з репозиторія.\n- Файл `gallery-items.js` містить масив `galleryItems`, який містить об'єкти з\n  інформацією про зображення: маленьке (прев`ю), оригінальне (велике) і опис. Ми\n  вже підключили його до кожного з JS-файлів проекту.\n\n## Завдання 1 - галерея зображень\n\nСтвори галерею з можливістю кліку по її елементах і перегляду повнорозмірного\nзображення у модальному вікні. Подивися демо відео роботи галереї.\n\nhttps://user-images.githubusercontent.com/17479434/127711719-4e293f5b-fbaa-4851-8671-fc841963d961.mp4\n\nВиконуй це завдання у файлах `01-gallery.html` і `01-gallery.js`. Розбий його на\nдекілька підзавдань:\n\n1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і\n   наданого шаблону елемента галереї.\n2. Реалізація делегування на `div.gallery` і отримання `url` великого\n   зображення.\n3. Підключення скрипту і стилів бібліотеки модального вікна\n   [basicLightbox](https://basiclightbox.electerious.com/). Використовуй\n   [CDN сервіс jsdelivr](https://www.jsdelivr.com/package/npm/basiclightbox?path=dist)\n   і додай у проект посилання на мініфіковані (`.min`) файли бібліотеки.\n4. Відкриття модального вікна по кліку на елементі галереї. Для цього ознайомся\n   з [документацією](https://github.com/electerious/basicLightbox#readme) і\n   [прикладами](https://basiclightbox.electerious.com/).\n5. Заміна значення атрибута `src` елемента `\u003cimg\u003e` в модальному вікні перед\n   відкриттям. Використовуй готову розмітку модального вікна із зображенням з\n   прикладів бібліотеки [basicLightbox](https://basiclightbox.electerious.com/).\n\n### Розмітка елемента галереї\n\nПосилання на оригінальне зображення повинно зберігатися в data-атрибуті `source`\nна елементі `\u003cimg\u003e`, і вказуватися в `href` посилання. Не додавай інші HTML теги\nабо CSS класи, крім тих, що містяться в цьому шаблоні.\n\n```html\n\u003cdiv class=\"gallery__item\"\u003e\n  \u003ca class=\"gallery__link\" href=\"large-image.jpg\"\u003e\n    \u003cimg\n      class=\"gallery__image\"\n      src=\"small-image.jpg\"\n      data-source=\"large-image.jpg\"\n      alt=\"Image description\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n```\n\nЗверни увагу на те, що зображення обгорнуте посиланням, отже по кліку за\nзамовчуванням користувач буде перенаправлений на іншу сторінку. Заборони цю\nповедінку за замовчуванням.\n\n### Закриття з клавіатури\n\n\u003e ⚠️ Наступний функціонал не обов'язковий для здавання завдання, але буде\n\u003e хорошою додатковою практикою.\n\nДодай закриття модального вікна після натискання клавіші `Escape`. Зроби так,\nщоб прослуховування клавіатури було тільки доти, доки відкрите модальне вікно.\nБібліотекаи [basicLightbox](https://basiclightbox.electerious.com/) містить\nметод для програмного закриття модального вікна.\n\n## Завдання 2 - бібліотека `SimpleLightbox`\n\nЗроби таку саму галерею як в першому завданні, але використовуючи бібліотеку\n[SimpleLightbox](https://simplelightbox.com/), яка візьме на себе обробку кліків\nпо зображеннях, відкриття і закриття модального вікна, а також гортання\nзображень за допомогою клавіатури.\n\nhttps://user-images.githubusercontent.com/17479434/127714821-4b7527c8-01db-42d3-83f0-8c1578561982.mp4\n\nНеобхідно трохи змінити розмітку картки галереї, використовуй цей шаблон.\n\n```html\n\u003ca class=\"gallery__item\" href=\"large-image.jpg\"\u003e\n  \u003cimg class=\"gallery__image\" src=\"small-image.jpg\" alt=\"Image description\" /\u003e\n\u003c/a\u003e\n```\n\nВиконуй це завдання у файлах `02-lightbox.html` і `02-lightbox.js`. Розбий його\nна декілька підзавдань:\n\n1. Створення і рендер розмітки на підставі масиву даних `galleryItems` і\n   наданого шаблону елемента галереї. Використовуй готовий код з першого\n   завдання.\n2. Підключення скрипту і стилів бібліотеки, використовуючи\n   [CDN сервіс cdnjs](https://cdnjs.com/libraries/simplelightbox). Необхідно\n   додати посилання на два файли: `simple-lightbox.min.js` і\n   `simple-lightbox.min.css`.\n3. Ініціалізація бібліотеки після створення і додання елементів галереї у\n   `div.gallery`. Для цього ознайомся з документацією\n   [SimpleLightbox](https://simplelightbox.com/) - насамперед секції «Usage» і\n   «Markup».\n4. Подивися в документації секцію «Options» і додай відображення підписів до\n   зображень з атрибута `alt`. Нехай підпис буде знизу і з'являється через 250\n   мілісекунд після відкриття зображення.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flesiaukr%2Fgoit-js-finalproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flesiaukr%2Fgoit-js-finalproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flesiaukr%2Fgoit-js-finalproject/lists"}