Update README.md

README.md

@@ -1,113 +1,58 @@
-# Vanilla App Template
+# Домашнє завдання №11
 
-Цей проект було створено за допомогою Vite. Для знайомства та налаштування
-додаткових можливостей [звернись до документації](https://vitejs.dev/).
+- Створи репозиторій goit-js-hw-11
+- Збери проєкт за допомогою [Vite](https://vitejs.dev/). Ми підготували для тебе
+  [готову збірку](https://github.com/goitacademy/vanilla-app-template) з усіма
+  додатковими налаштуваннями проєкту та рекомендуємо використовувати саме її.
+- Прочитай завдання і виконай його в редакторі коду.
+- Переконайся, що код відформатований за допомогою `Prettier`, а в консолі
+  відсутні помилки й попередження під час відкриття живої сторінки завдання.
+- Здай домашнє завдання на перевірку.
 
-## Створення репозиторію за шаблоном
+**Формат здачі:** Домашня робота містить два посилання: на вихідні файли і
+робочу сторінку на `GitHub Pages`.
 
-Використовуй цей репозиторій організації GoIT як шаблон для створення
-репозиторію свого проекту. Для цього натисни на кнопку `«Use this template»` і
-обери опцію `«Create a new repository»`, як показано на зображенні.
+## Завдання — Пошук зображень
 
-![Creating repo from a template step 1](./assets/template-step-1.png)
+Створи застосунок пошуку зображень за ключовим словом і їх перегляду в галереї.
+Додай оформлення елементів інтерфейсу згідно з макетом.
 
-На наступному етапі відкриється сторінка створення нового репозиторію. Заповни
-поле його імені, переконайся, що репозиторій публічний, після чого натисни
-кнопку `«Create repository from template»`.
+## Форма пошуку
 
-![Creating repo from a template step 2](./assets/template-step-2.png)
+Форма пошуку міститься в HTML-документі. Користувач буде вводити рядок для
+пошуку в текстове поле, а за сабмітом форми необхідно виконувати HTTP-запит із
+цим пошуковим рядком
 
-Після того, як репозиторій буде створено, необхідно перейти в налаштування
-створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано
-на зображенні.
+## HTTP-запити
 
-![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png)
+Для бекенду використовуй публічний API сервіс
+[Pixabay](https://pixabay.com/api/docs/). Зареєструйся, отримай свій унікальний
+ключ доступу і ознайомся з
+[документацією](https://pixabay.com/api/docs/#api_search_images).
 
-Проскроливши сторінку до самого кінця, в секції `«Workflow permissions»` обери
-опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це необхідно
-для автоматизації процесу деплою проекту.
+Список параметрів рядка запиту, які тобі обов'язково необхідно вказати:
 
-![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png)
+- `key` — твій унікальний ключ доступу до API.
+- `q` — слово для пошуку. Те, що буде вводити користувач.
+- `image_type` — тип зображення. Потрібні тільки фотографії, тому постав
+  значення `photo`.
+- `orientation` — орієнтація фотографії. Постав значення `horizontal`.
+- `safesearch` — фільтр за віком. Постав значення `true`.
 
-Тепер у тебе є особистий репозиторій проекту, зі структурою файлів та папок
-репозиторію-шаблону. Далі працюй з ним, як з будь-яким іншим особистим
-репозиторієм, клонуй його собі на комп'ютер, пиши код, роби коміти та відправляй
-їх на GitHub.
+У відповіді буде об’єкт із декількома властивостями, в одному з яких буде масив
+зображень, що задовольнили критерії параметрів запиту.
 
-## Підготовка до роботи
+Якщо бекенд повертає порожній масив, значить, нічого підходящого не було
+знайдено. У такому разі показуй повідомлення з текстом
+`"Sorry, there are no images matching your search query. Please try again!"`.
+Для повідомлень використовуй бібліотеку
+[iziToast](https://izitoast.marcelodolza.com/).
 
-1. Переконайся, що на комп'ютері встановлено LTS-версію Node.js.
-   [Скачай та встанови](https://nodejs.org/en/) її якщо необхідно.
-2. Встанови базові залежності проекту в терміналі командою `npm install`.
-3. Запусти режим розробки, виконавши в терміналі команду `npm run dev`.
-4. Перейдіть у браузері за адресою
-   [http://localhost:5173](http://localhost:5173). Ця сторінка буде автоматично
-   перезавантажуватись після збереження змін у файли проекту.
+Для того щоб підключити CSS код бібліотеки в проєкт, необхідно додати ще один
+імпорт, крім того, що описаний у документації.
 
-## Файли і папки
+Подивись демовідео роботи застосунку на цьому етапі.
 
-- Файли розмітки компонентів сторінки повинні лежати в папці `src/partials` та
-  імпортуватись до файлу `index.html`. Наприклад, файл з розміткою хедера
-  `header.html` створюємо у папці `partials` та імпортуємо в `index.html`.
-- Файли стилів повинні лежати в папці `src/css` та імпортуватись до HTML-файлів
-  сторінок. Наприклад, для `index.html` файл стилів називається `index.css`.
-- Зображення додавай до папки `src/img`. Збирач оптимізує їх, але тільки при
-  деплої продакшн версії проекту. Все це відбувається у хмарі, щоб не
-  навантажувати твій комп'ютер, тому що на слабких компʼютерах це може зайняти
-  багато часу.
+https://youtu.be/4tGWr0Q7HV0
 
-## Деплой
-
-Продакшн версія проекту буде автоматично збиратися та деплоїтись на GitHub
-Pages, у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад,
-після прямого пуша або прийнятого пул-реквесту. Для цього необхідно у файлі
-`package.json` змінити значення прапора `--base=/<REPO>/`, для команди `build`,
-замінивши `<REPO>` на назву свого репозиторію, та відправити зміни на GitHub.
-
-```json
-"build": "vite build --base=/<REPO>/",
-```
-
-Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) та
-виставити роздачу продакшн версії файлів з папки `/root` гілки `gh-pages`, якщо
-це не було зроблено автоматично.
-
-![GitHub Pages settings](./assets/repo-settings.png)
-
-### Статус деплою
-
-Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.
-
-- **Жовтий колір** - виконується збірка та деплой проекту.
-- **Зелений колір** - деплой завершився успішно.
-- **Червоний колір** - під час лінтингу, збірки чи деплою сталася помилка.
-
-Більш детальну інформацію про статус можна переглянути натиснувши на іконку, і в
-вікні, що випадає, перейти за посиланням `Details`.
-
-![Deployment status](./assets/deploy-status.png)
-
-### Жива сторінка
-
-Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за
-адресою, вказаною на вкладці `Settings` > `Pages` в налаштуваннях репозиторію.
-Наприклад, ось посилання на живу версію для цього репозиторію
-
-[https://goitacademy.github.io/vanilla-app-template/](https://goitacademy.github.io/vanilla-app-template/).
-
-Якщо відкриється порожня сторінка, переконайся, що у вкладці `Console` немає
-помилок пов'язаних з неправильними шляхами до CSS та JS файлів проекту
-(**404**). Швидше за все у тебе неправильне значення прапора `--base` для
-команди `build` у файлі `package.json`.
-
-## Як це працює
-
-![How it works](./assets/how-it-works.png)
-
-1. Після кожного пуша у гілку `main` GitHub-репозиторію, запускається
-   спеціальний скрипт (GitHub Action) із файлу `.github/workflows/deploy.yml`.
-2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується та
-   проходить лінтинг та збірку перед деплоєм.
-3. Якщо всі кроки пройшли успішно, зібрана продакшн версія файлів проекту
-   відправляється у гілку `gh-pages`. В іншому випадку, у лозі виконання скрипта
-   буде вказано в чому проблема.
+<iframe width="640" height="360" src="https://www.youtube.com/embed/4tGWr0Q7HV0" title="HTTP-запити" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>