- Созданы репозитории
goit-js-hw-13-image-finder
. - При сдаче домашней работы есть две ссылки для каждого проекта: на исходные файлы и рабочую страницу на GitHub pages.
- При посещении рабочей страницы (GitHub pages) задания, в консоли нету ошибок и предупреждений
- Имена переменных и функций понятные, описательные
- Проект собран с помощью
Webpack
- Код отформатирован с помощью
Prettier
- Добавь минимальную стилизацию
- Есть файл
apiService.js
с дефолтным экспортом объекта отвечающего за логику HTTP-запросов к API
Напиши небольшое приложение поиска и просмотра изображений по ключевому слову
Для HTTP-запросов используй публичный Pixabay API. Зарегистрируйся и получи ключ.
URL-строка запроса:
https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=что_искать&page=номер_страницы&per_page=12&key=твой_ключ
Pixabay API поддерживает пагинацию, пусть в ответе приходит по 12 объектов,
установлено в параметре per_page
. По умолчанию параметр page
равен 1
. При
каждом последующем запросе page
увеличивается на 1, а при поиске по новому
ключевому слову необходимо сбрасывать его значение в 1
.
Каждое изобаржение описывается объектом.
{
"comments": 78,
"downloads": 63296,
"favorites": 558,
"id": 1508613,
"imageHeight": 2135,
"imageSize": 1630104,
"imageWidth": 2894,
"largeImageURL": "https://pixabay.com/get/57e5d54b4c53af14f6da8c7dda793376173cd8e7524c704c702873dc9f44c551_1280.jpg",
"likes": 575,
"pageURL": "https://pixabay.com/photos/cat-animal-cat-portrait-cat-s-eyes-1508613/",
"previewHeight": 110,
"previewURL": "https://cdn.pixabay.com/photo/2016/07/10/21/47/cat-1508613_150.jpg",
"previewWidth": 150,
"tags": "cat, animal, cat portrait",
"type": "photo",
"user": "cocoparisienne",
"userImageURL": "https://cdn.pixabay.com/user/2018/11/26/11-06-29-714_250x250.jpg",
"user_id": 127419,
"views": 127450,
"webformatHeight": 472,
"webformatURL": "https://pixabay.com/get/57e5d54b4c53af14f6da8c7dda793376173cd8e7524c704c702873dc9f44c551_640.jpg",
"webformatWidth": 640
}
Тебе интересны следующие свойства:
webformatURL
- ссылка на маленькое изображение для списка карточекlargeImageURL
- ссылка на большое изображение (смотри пункт 'дополнительно')likes
- количество лайковviews
- количество просмотровcomments
- количество комментариевdownloads
- количество загрузок
Создает DOM-элемент следующей структуры. Можно использовать шаблонизацию.
<form class="search-form" id="search-form">
<input
type="text"
name="query"
autocomplete="off"
placeholder="Search images..."
/>
</form>
Создает DOM-элемент следующей структуры.
<ul class="gallery">
<!-- Список <li> с карточками изображений -->
</ul>
Создает DOM-элемент следующей структуры.
<div class="photo-card">
<img src="" alt="" />
<div class="stats">
<p class="stats-item">
<i class="material-icons">thumb_up</i>
1108
</p>
<p class="stats-item">
<i class="material-icons">visibility</i>
320321
</p>
<p class="stats-item">
<i class="material-icons">comment</i>
129
</p>
<p class="stats-item">
<i class="material-icons">cloud_download</i>
176019
</p>
</div>
</div>
Для иконок используются Material icons. Для их корректной работы достаточно в HTML-файле добавить ссылку на веб-шрифт.
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
Или добавив npm-пакет material-design-icons
и импортировав веб-шрифт в
index.js
.
При нажатии на кнопку Load more
должна догружаться следующая порция
изображений и рендериться вместе с предыдущими.
Страница должна автоматически плавно проскроливаться после рендера изображений ровно на один экран, чтобы перевести пользователя на начало загруженных изображений. Используй window.scrollTo().
- Можно добавить плагин нотификаций, например pnotify, и показывать нотификации на результат HTTP-запросов
- Можно добавить функционал отображения большой версии изображения через плагин модального окна, например basicLightbox, при клике на изображение галереи
- Вместо кнопки
Load more
можно сделать бесконечную загрузку при скроле используяIntersection Observer
.