goit js hw 11

Leer en otros idiomas: ucraniano, inglés.

Criterios de aceptación

• Se creó el repositorio goit-js-hw-11 .
• La tarea contiene dos enlaces: en archivos de salida y una página de trabajo en GitHub Pages .
• La consola carece de errores y advertencias al abrir una página de vida de la tarea.
• El proyecto se ensambla utilizando la plantilla del proyecto de paquete.
• La biblioteca Axios se utilizó para las solicitudes HTTP.
• Se utiliza la sintaxis async/await .
• La biblioteca Notiflix se usó para mensajes.
• El código está formulado usando Prettier .

La tarea es encontrar imágenes

Cree un frente de la aplicación de la búsqueda y visualización de imágenes por palabra clave. Agregue el diseño de elementos de interfaz. Vea el Video de demostración de la aplicación.

Imagen- Search-PP-DMO.MP4

El formulario de búsqueda

El formulario primero contiene en el documento HTML. El usuario ingresará una línea para buscar en un cuadro de texto, y el formulario del formulario debe hacerse mediante solicitud HTTP.

 < form class =" search-form " id =" search-form " >
  < input
    type =" text "
    name =" searchQuery "
    autocomplete =" off "
    placeholder =" Search images... "
  />
  < button type =" submit " > Search </ button >
</ form > 

Http-ask

Use una API pública de Pixabay para un respaldo. Regístrese, obtenga su clave de acceso única y se familiarice con la documentación.

Lista de las opciones de cadena de consulta que debe indicar:

• key es su clave de acceso única para la API.
• q es el término para la búsqueda. Lo que ingresará el usuario.
• image_type - Tipo de imagen. Solo se necesitan fotos, así que ponga photo .
• orientation - Orientación de la foto. Pon el valor de horizontal .
• safesearch - Filtrar por edad. Poner un valor true .

La respuesta será una variedad de imágenes que satisfacen los criterios de los parámetros de consulta. Cada imagen se describe mediante un objeto del que solo está interesado en las siguientes propiedades:

• webformatURL : enlace a una pequeña imagen para la lista de tarjetas.
• largeImageURL - Enlace a una imagen grande.
• tags : una línea con una descripción de la imagen. Adecuado para un atributo alt .
• likes : el número de me gusta.
• views : el número de vistas.
• comments : el número de comentarios.
• downloads : el número de descargas.

Si un respaldo devuelve una matriz vacía, entonces no se encontró nada adecuado. En este caso, muestre un mensaje con el texto "Sorry, there are no images matching your search query. Please try again." . Use la biblioteca Notiflix para mensajes.

Galería y tarjeta de imagen

El elemento div.gallery se contiene por primera vez en el documento HTML, y debe alquilar para las marcas de tarjetas de imagen. Al buscar una nueva palabra clave, debe limpiar completamente el contenido de la galería para no mezclar los resultados.

 < div class =" gallery " >
  <!-- Картки зображень -->
</ div >

Plantilla de marcado de tarjeta de una imagen para la galería.

 < 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 > 

Paginación

La API de Pixabay admite la paginación y proporciona parámetros page y per_page . Asegúrese de que cada respuesta llegue 40 objetos (predeterminado 20).

• El valor inicial del parámetro page debe ser 1 .
• Con cada solicitud posterior, debe aumentarse en 1 .
• Al buscar una nueva palabra clave, el valor page debe devolverse al original, ya que habrá un vellón en una nueva colección de imágenes.

El documento HTML ya contiene una marca de botón, en el clic en el que necesita hacer una solicitud para el siguiente grupo de imágenes y agregar el marcado a los elementos existentes de la galería.

 < button type =" button " class =" load-more " > Load more </ button >

• En el estado inicial, el botón debe estar oculto.
• Después de la primera solicitud, el botón aparece en la interfaz debajo de la galería.
• En el caso de Re -Sub -Form, el botón se oculta primero, y después de la solicitud se muestra nuevamente.

En respuesta, el respaldo devuelve totalHits : el número total de imágenes que cumplen con el criterio de búsqueda (para una cuenta gratuita). Si el usuario ha llegado al final de la colección, oculte el botón y envíe un mensaje con el texto "We're sorry, but you've reached the end of search results." .

Además

️ La siguiente funcionalidad no es necesaria para la tarea, pero será una buena práctica adicional.

Mensaje

Después de la primera solicitud con cada nueva búsqueda, obtenga un mensaje que dirá cuántas imágenes se encontraron ( totalHits ). Texto del mensaje - "Hooray! We found totalHits images."

Biblioteca de SimpleLightbox

Agregue una versión grande de la imagen con la biblioteca SimpleLightBox para una galería completa.

• La marca deberá envolver cada tarjeta de imagen en el enlace, como se indica en la documentación.
• La biblioteca contiene un Mattode refresh() , que debe llamarse cada vez que se agrega un nuevo grupo de imágenes.

Para conectar el código de la biblioteca CSS al proyecto, debe agregar otra importación, excepto como se describe en la documentación.

 // Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ;

Desplazando la página

Realice un desplazamiento sin problemas de la página después de solicitar y reproducir cada grupo de imágenes posterior. Aquí hay un código de código, pero compruébalo tú mismo.

 const { height : cardHeight } = document
  . querySelector ( '.gallery' )
  . firstElementChild . getBoundingClientRect ( ) ;

window . scrollBy ( {
  top : cardHeight * 2 ,
  behavior : 'smooth' ,
} ) ;

Clase sin fin

En lugar del botón Cargar más, puede hacer una descarga interminable de imágenes mientras se desplaza. Le damos plena libertad de acción en la implementación, puede usar cualquier biblioteca.

---

Plantilla de paquete

Este proyecto fue un Sozdan en el paquete. Para el marcado y ajuste del anclaje de exposición que se seleccionará para la documentación.

Preparación de un nuevo proyecto

1. Haga coincidir la versión LTS de Node.js. Descargar e instituciones si es necesario.
2. El vidrio es repositorio.
3. parcel-project-template nash nashmi.
4. Cree un nuevo repositorio vacío en GitHub.
5. Proyecto OTKROI en VScode, inicie el término y sacrifique el proyecto con repositores de GitHub en las instrucciones.
6. Instituciones del proyecto en el equipo npm install terminal.
7. Inicie el modo de reproducción, lance el comando npm start .
8. Vaya al navegador en http: // localhost: 1234. Esta gráfica será reemplazada por el hombre hecho automático hecho en los archivos del proyecto.

Archivos y carpetas

• Todos los estilos de archivo Parshali se encuentran en el Papquet src/sass y se importan en los archivos de archivos de páginas. Por ejemplo, para index.html , el archivo de estilo se llama index.scss .
• Identificar en la carpeta src/images . El corusiano los optimiza, pero solo con la deploración de la versión del proyecto del proyecto. Todo entra en la vista de su computadora, ya que puede ser mucho tiempo en los autos débiles.

DESPLEGAR

Para ajustar el proyecto Depaza, es necesario dibujar muchos pelusas adicionales en la configuración de su repositorio. Vamos en Settings y en las subsecaciones Actions seleccione el elemento General .

Deslice la trama a la post -Secia, en la que la opacia se toma en la pista en el rastro de la imagen y el bien de Save . Sin estos tunks en las primeras, habrá una molestia para automatizar el proceso de implementación.

La versión del proyecto del proyecto será automática y se detendrá en las páginas de GitHub, en la página gh-pages , el tiempo de la COGD se actualiza main . Por ejemplo, una pipa recta o una pipa retirada de la piscina o un empuje recto. Para esto, debe presentar una homepage y build de script de archivo package.json , amortiguó your_username y your_repo_name para el suyo, y envíe el nombre en GitHub.

 "homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
  "build" : " parcel build src/*.html --public-url /your_repo_name/ "
},

Casi vaya a la sintonización de Repository GitHub ( Settings > Pages ) y dibujará la producción de archivo de archivo desde la carpeta /root de gh-pages , si esto no es muy automático.

Estado de Depaza

El estado de un despliegue de un commuty extremo es conquistado por el ícono del ego del yoditicador.

• La ictericia : la colección y la degaño del proyecto.
• El color verde : el Depltoi terminó en un fondo.
• El color rojo : en el momento de la pelusa, la primicia o el despliegue de la implementación.

La dolorosa información detallada sobre el estado se puede empapar en el icono y en el interruptor de ventanas superior en Details .

Trama en vivo

Debido al tiempo, un par de flotas, vivo la trama, puedes hervir a fuego lento en la dirección indicada en homepage . Por ejemplo, vivo un mand para este repositorio https://goitacademy.github.io/parcel-project-semplate.

Si se abre una parcela del desierto, para matar Console de la NOR a la vista de los paquetes incorporados de archivos del proyecto CSS y JS ( 404 ). Digüe todo en Taby Irregular significado de homepage o build script en el archivo package.json .

¿Cómo es este trabajo?

1. Después de cada empuje, se inicia main script especial (acción de GitHub) del archivo .github/workflows/deploy.yml .
2. Todos los repositores de archivos se compilan en el servidor, donde el proyecto se inicializa y pasa la cosecha frente al Deflo.
3. Si todos los pasos pasaron tanto, la única producción de los proyectos de archivos del proyecto en gh-pages . En el caso opuesto, en el script lógico se dará en el problema.