goit js hw 11
1.0.0
Читать на других языках: украинский, английский.
goit-js-hw-11 был создан.GitHub Pages .async/await .Prettier .Создайте фронт применения поиска и просмотра изображений по ключевым словам. Добавьте дизайн элементов интерфейса. Смотрите демо-видео приложения.
Форма сначала содержит в документе 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 LibraryДобавьте большую версию изображения с библиотекой 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' ,
} ) ;Вместо кнопки загрузки больше, вы можете сделать бесконечную загрузку изображений при прокрутке. Мы даем вам полную свободу действий в реализации, вы можете использовать любые библиотеки.
Этот проект был Созданом в посылке. Для маркировки и корректировки якорной установки для выбора для документации.
parcel-project-template Nash Nashmi.npm install .npm start .src/sass Papquet и импортируются в файлах страниц. Например, для index.html файл стиля называется index.scss .src/images . Припев оптимизирует их, но только с помощью защиты проектной версии проекта. Все идет в виде вашего компьютера, так что, поскольку это может быть много времени на слабых автомобилях. Чтобы скорректировать проект Depaza, необходимо нарисовать много дополнительных баллов на настройке вашего репозитория. Приходите на вкладку Settings и в подразделениях Actions выберите General элемент.
Сдвиньте сюжет до поста, в которой Опация принимается в трассе на следе изображения и саме Save . Без этих тунков в совках будет бесстрасть для автоматизации процесса развертывания.
Версия проекта проекта будет автоматической и остановлена на страницах GitHub, во влажном состоянии gh-pages , время COGD обновляется main мокрой. Например, прямая пуша или сдержанная бассейн Pusha или прямая пуша. Для этого вам нужно подать homepage и build сценариев package.json , приглушенный your_username и your_repo_name для собственного и отправить имя на Github.
"homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
"build" : " parcel build src/*.html --public-url /your_repo_name/ "
}, Почти зайдите в настройку Github-Repository ( Settings > Pages ) и вытянут производство файла файла из папки /root gh-pages , если это не так много автоматического.
Статус развертывания экстремального коммутирования завоеван иконой эго йодитатора.
Болезненная подробная информация о статусе может быть пропитана в значке, а в превышении переключателя Windows в Details .
Из -за времени, пара флотов, я живу сюжетом, вы можете варить на адресу, указанном в homepage . Например, я живу мандатом для этого хранилища https://goitacademy.github.io/parcel-project-template.
Если открыт заговор по пустыне, чтобы убить Console вкладку NO NO до вида включенных пакетов файлов проекта CSS и JS ( 404 ). Аист все в табичном нерегулярном значении homepage или сценария build в файловом package.json .
main скрипт (действие GitHub) из файла .github/workflows/deploy.yml .gh-pages . В противоположном случае в сценарии логики будет дано в проблеме.
