goit js hw 11
1.0.0
Leia em outros idiomas: Ucraniano, inglês.
goit-js-hw-11 foi criado.GitHub Pages .async/await é usada.Prettier .Crie uma frente da aplicação da pesquisa e visualização de imagens por palavra -chave. Adicione o design dos elementos da interface. Veja a demonstração do aplicativo.
O formulário primeiro contém no documento HTML. O usuário inserirá uma linha para pesquisar em uma caixa de texto e o formulário do formulário deve ser feito pela solicitação HTTP.
< form class =" search-form " id =" search-form " >
< input
type =" text "
name =" searchQuery "
autocomplete =" off "
placeholder =" Search images... "
/>
< button type =" submit " > Search </ button >
</ form > Use uma API pública Pixabay para um apoio. Registre -se, obtenha sua chave de acesso exclusiva e familiarize -se com a documentação.
Lista das opções de sequência de consulta que você deve indicar:
key é a sua chave de acesso exclusiva para a API.q é o termo para pesquisa. O que o usuário entrará.image_type - Tipo de imagem. São necessárias apenas fotos, então coloque photo .orientation - Orientação da foto. Coloque o valor da horizontal .safesearch - Filtre por idade. Coloque um valor true .A resposta será uma variedade de imagens que atendiam aos critérios dos parâmetros de consulta. Cada imagem é descrita por um objeto do qual você só está interessado nas seguintes propriedades:
webformatURL - Link para uma imagem pequena para a lista de cartões.largeImageURL - Link para uma imagem grande.tags - uma linha com uma descrição da imagem. Adequado para um atributo alt .likes - o número de curtidas.views - o número de visualizações.comments - o número de comentários.downloads - o número de downloads. Se um apoio retornar uma matriz vazia, nada foi encontrado. Nesse caso, mostre uma mensagem com o texto "Sorry, there are no images matching your search query. Please try again." . Use a biblioteca notiflix para mensagens.
O elemento div.gallery está primeiro contido no documento HTML e deve ser alugado para marcas de cartão de imagem. Ao procurar uma nova palavra -chave, você precisa limpar completamente o conteúdo da galeria para não misturar os resultados.
< div class =" gallery " >
<!-- Картки зображень -->
</ div >Modelo de marcação de cartão de uma imagem para a galeria.
< 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 > A API do Pixabay suporta a paginação e fornece parâmetros de page e per_page . Verifique se cada resposta vem 40 objetos (padrão 20).
page deve ser 1 .1 .page deve ser devolvido ao original, pois haverá um lã em uma nova coleção de imagens.O documento HTML já contém uma marcação de botões, no clique no qual você precisa fazer uma solicitação para o próximo grupo de imagens e adicionar a marcação aos elementos existentes da galeria.
< button type =" button " class =" load-more " > Load more </ button > Em resposta, o apoio retorna totalHits - o número total de imagens que atendem ao critério de pesquisa (para uma conta gratuita). Se o usuário chegar ao final da coleção, oculte o botão e produza uma mensagem com o texto "We're sorry, but you've reached the end of search results." .
️ A seguinte funcionalidade não é necessária para a tarefa, mas será uma boa prática extra.
Após a primeira solicitação a cada nova pesquisa, receba uma mensagem que dirá quantas imagens foram encontradas ( totalHits ). Texto da mensagem - "Hooray! We found totalHits images."
SimpleLightboxAdicione uma versão grande da imagem com a biblioteca SimpleLightBox para uma galeria completa.
refresh() , que deve ser chamado toda vez que um novo grupo de imagens é adicionado.Para conectar o código da biblioteca CSS ao projeto, você precisa adicionar outra importação, exceto conforme descrito na documentação.
// Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ;Faça uma rolagem suave da página depois de solicitar e reproduzir cada grupo de imagens subsequentes. Aqui está um código de código, mas entenda sozinho.
const { height : cardHeight } = document
. querySelector ( '.gallery' )
. firstElementChild . getBoundingClientRect ( ) ;
window . scrollBy ( {
top : cardHeight * 2 ,
behavior : 'smooth' ,
} ) ;Em vez do botão Carregar mais, você pode fazer um download infinito de imagens durante a rolagem. Damos a você total liberdade de ação na implementação, você pode usar qualquer biblioteca.
Este projeto foi um Sozdan em Parcel. Para a marcação e ajuste da ancoragem da exposição, a ser selecionada para documentação.
parcel-project-template Nash Nashmi.npm install do terminal.npm start .src/sass e são importados nos arquivos de arquivos das páginas. Por exemplo, para index.html , o arquivo de estilo é chamado de index.scss .src/images . O corusiano os otimiza, mas apenas com a deploração da versão do projeto do projeto. Tudo vai à vista do seu computador, para que possa demorar muito tempo nos carros fracos. Para ajustar o projeto DePaza, é necessário desenhar muitas folhas adicionais na configuração do seu repositório. Venha na guia Settings e, nas subescações Actions , selecione o item General .
Deslize o enredo para o post -secia, no qual a Opacia é levada na pista no traço da imagem e o bem de Save . Sem esses tunks nas conchas, haverá sem receita para automatizar o processo de implantação.
A versão do projeto do projeto será automática e parada nas páginas do Github, no molhado gh-pages , o tempo do cogd é atualizado main molhado. Por exemplo, um pusha reto ou um pusha retendido na piscina ou um pusha reto. Para isso, você precisa arquivar uma homepage do arquivo package.json e build um script, abafar your_username e your_repo_name para o seu próprio e enviar o nome no github.
"homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
"build" : " parcel build src/*.html --public-url /your_repo_name/ "
}, Quase vá para o ajuste do Github-Repository ( Settings > Pages ) e desenhará a produção de arquivo de arquivo da pasta /root das gh-pages , se isso não for muito automático.
O status de uma implantação de uma comutação extrema é conquistada pelo ícone do ego do Yoditicator.
As informações detalhadas dolorosas sobre o status podem ser embebidas no ícone e no excedente do interruptor do Windows nos Details .
Por causa do tempo, duas frotas, eu moro na trama, você pode ferver no endereço indicado homepage . Por exemplo, eu vivo um MAND para este repositório https://goitacademy.github.io/parcel-project-template.
Se um gráfico do deserto for aberto, para matar Console da visão dos pacotes incorporados de arquivos de projeto CSS e JS ( 404 ). Cegonha tudo com significado irregular de Taby homepage ou build um script no arquivo package.json .
main script especial (ação do github) do arquivo .github/workflows/deploy.yml é iniciado.gh-pages . No caso oposto, no script lógico será apresentado no problema.
