- Создан репозиторий
goit-js-hw-11
. - При сдаче домашней работы есть две ссылки: на исходные файлы и рабочую страницу на
GitHub Pages
. - При посещении живой страницы задания, в консоли нету ошибок и предупреждений.
- Проект собран с помощью parcel-project-template.
- Для HTTP запросов использована библиотека axios.
- Используется синтаксис
async/await
. - Для уведомлений использована библиотека notiflix.
- Код отформатирован
Prettier
.
Создай фронтенд часть приложения поиска и просмотра изображений по ключевому слову. Добавь оформление элементов интерфейса. Посмотри демо видео работы приложения.
image-search-app-demo.mp4
Форма изначально есть в HTML документе. Пользователь будет вводить строку для поиска в текстовое поле, а при сабмите формы необходимо выполнять HTTP-запрос.
<form class="search-form" id="search-form">
<input type="text" name="searchQuery" autocomplete="off" placeholder="Search images..." />
<button type="submit">Search</button>
</form>
В качестве бэкенда используй публичный API сервиса Pixabay. Зарегистрируйся, получи свой уникальный ключ доступа и ознакомься с документацией.
Список параметров строки запроса которые тебе обязательно необходимо указать:
key
- твой уникальный ключ доступа к API.q
- термин для поиска. То, что будет вводить пользователь.image_type
- тип изображения. Мы хотим только фотографии, поэтому задай значениеphoto
.orientation
- ориентация фотографии. Задай значениеhorizontal
.safesearch
- фильтр по возрасту. Задай значениеtrue
.
В ответе будет массив изображений удовлетворивших критериям параметров запроса. Каждое изображение описывается объектом, из которого тебе интересны только следующие свойства:
webformatURL
- ссылка на маленькое изображение для списка карточек.largeImageURL
- ссылка на большое изображение.tags
- строка с описанием изображения. Подойдет для атрибутаalt
.likes
- количество лайков.views
- количество просмотров.comments
- количество комментариев.downloads
- количество загрузок.
Если бэкенд возвращает пустой массив, значит ничего подходящего найдено небыло. В таком случае
показывай уведомление с текстом
"Sorry, there are no images matching your search query. Please try again."
. Для уведомлений
используй библиотеку notiflix.
Элемент div.gallery
изначально есть в HTML документе, и в него необходимо рендерить разметку
карточек изображений. При поиске по новому ключевому слову необходимо полностью очищать содержимое
галереи, чтобы не смешивать результаты.
<div class="gallery">
<!-- Карточки изображений -->
</div>
Шаблон разметки карточки одного изображения для галереи.
<div class="photo-card">
<img src="" alt="" loading="lazy" />
<div class="info">
<p class="info-item">
<b>Likes</b>
</p>
<p class="info-item">
<b>Views</b>
</p>
<p class="info-item">
<b>Comments</b>
</p>
<p class="info-item">
<b>Downloads</b>
</p>
</div>
</div>
Pixabay API поддерживает пагинацию и предоставляет параметры page
и per_page
. Сделай так, чтобы
в каждом ответе приходило 40 объектов (по умолчанию 20).
- Изначально значение параметра
page
должно быть1
. - При каждом последующем запросе, его необходимо увеличить на
1
. - При поиске по новому ключевому слову значение
page
надо вернуть в исходное, так как будет пагинация по новой коллекции изображений.
В HTML документе уже есть разметка кнопки при клике по которой необходимо выполнять запрос за следующей группой изображений и добавлять разметку к уже существующим элементам галереи.
<button type="button" class="load-more">Load more</button>
- Изначально кнопка должна быть скрыта.
- После первого запроса кнопка появляется в интерфейсе под галереей.
- При повторном сабмите формы кнопка сначала прячется, а после запроса опять отображается.
В ответе бэкенд возвращает свойство totalHits
- общее количество изображений которые подошли под
критерий поиска (для бесплатного аккаунта). Если пользователь дошел до конца коллекции, пряч кнопку
и выводи уведомление с текстом "We're sorry, but you've reached the end of search results."
.
⚠️ Следующий функционал не обязателен при сдаче задания, но будет хорошей дополнительной практикой.
После первого запроса при каждом новом поиске выводить уведомление в котором будет написано сколько
всего нашли изображений (свойство totalHits
). Текст уведомления
"Hooray! We found totalHits images."
Добавить отображение большой версии изображения с библиотекой SimpleLightbox для полноценной галереи.
- В разметке необходимо будет обернуть каждую карточку изображения в ссылку, как указано в документации.
- У библиотеки есть метод
refresh()
который обязательно нужно вызывать каждый раз после добавления новой группы карточек изображений.
Для того чтобы подключить CSS код библиотеки в проект, необходимо добавить еще один импорт, кроме того который описан в документации.
// Описан в документации
import SimpleLightbox from 'simplelightbox';
// Дополнительный импорт стилей
import 'simplelightbox/dist/simple-lightbox.min.css';
Сделать плавную прокрутку страницы после запроса и отрисовки каждой следующей группы изображений. Вот тебе код подсказка, а разберись в нём самостоятельно.
const { height: cardHeight } = document
.querySelector('.gallery')
.firstElementChild.getBoundingClientRect();
window.scrollBy({
top: cardHeight * 2,
behavior: 'smooth',
});
Вместо кнопки «Load more» можно сделать бесконечную загрузку изображений при прокрутке страницы. Мы предоставлям тебе полную свободу действий в реализации, можешь использовать любые библиотеки.
Включите отображение скрытых файлов и папок в проводнике своей операционной системы, иначе вы не сможете выбрать и скопировать себе файлы настроек проекта, имена которых начинаются с точки.
На компьютере должена быть установлена LTS-версия Node.js со всеми дополнительными инструментами кроме Chocolatey - его ставить не нужно.
Один раз на проект установить все зависимости.
npm ci
Запустить режим разработки.
npm run dev
Во вкладке браузера перейти по адресу http://localhost:1234.
Сборка будет автоматически собирать и деплоить продакшен версию проекта на GitHub Pages, в ветку
gh-pages
, каждый раз когда обновляется ветка main
. Например, после прямого пуша или принятого
пул-реквеста. Для этого необходимо в файле package.json
отредактировать поле homepage
и скрипт
build
, заменив имя_пользователя
и имя_репозитория
на свои.
"homepage": "https://имя_пользователя.github.io/имя_репозитория",
"scripts": {
"build": "parcel build src/*.html --public-url /имя_репозитория/"
},
На всякий случай стоит зайти в настройки репозитория Settings
> Pages
и убедиться что продакшен
версии файлов раздаются из папки /root
ветки gh-pages
.
Через какое-то время живую страницу можно будет посмотреть по адресу указанному в отредактированном
свойстве homepage
, например
https://goitacademy.github.io/parcel-project-template.
- Все паршалы файлов стилей должны лежать в папке
src/sass
и импортироваться вsrc/sass/main.scss
- Изображения добавляйте в папку
src/images
, заранее оптимизировав их. Сборщик просто копирует используемые изображения чтобы не нагружать систему оптимизацией картинок, так как на слабых компьютерах это может занять много времени.