goit js hw 08

Leer en otros idiomas: ucraniano, inglés.

Criterios de aceptación

• Se creó goit-js-hw-08 .
• 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.
• El código está formulado usando Prettier .

Archivos iniciales

En la carpeta SRC encontrará archivos de inicio con marcas, estilos y scripts conectados para cada tarea. Copiéelos en el proyecto reemplazando completamente la carpeta src en la plantilla de parcelas. Para hacer esto, descargue todo este repositorio como un archivo o use el servicio Downgit para descargar una carpeta separada del repositorio.

Tarea 1 - Biblioteca de SimpleLightbox

Complete esta tarea en 01-gallery.html y 01-gallery.js . Romperlo en algunas subcalls:

1. Agregue la biblioteca SimpleLightBox como dependencia de un proyecto utilizando npm (ya no se requieren referencias de CDN de su trabajo pasado).
2. Use su código JavaScript de la tarea anterior, pero realice la reacción, dado que la biblioteca se ha instalado a través de npm (sintaxis de importación/exportación).

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

Tarea 2 - Video Pleer

HTML contiene <iframe> con video para el reproductor Vimeo. Escriba un script que mantendrá el video reproducirse en un repositorio local y, después de un reinicio de una página, continúe reproduciendo video de esta época.

 < iframe
  id =" vimeo-player "
  src =" https://player.vimeo.com/video/236203659 "
  width =" 640 "
  height =" 360 "
  frameborder =" 0 "
  allowfullscreen
  allow =" autoplay; encrypted-media "
> </ iframe >

Complete esta tarea en 02-video.html y 02-video.js . Romperlo en algunas subcalls:

1. Conocemos la documentación de la Biblioteca Vimeo.
2. Agregue la biblioteca como dependencia de un proyecto a través de npm .
3. Inicialice el reproductor en el archivo de script como se describe en la sección del reproductor preexistente, pero tenga en cuenta que tiene un reproductor agregado como un paquete NPM, no a través de CDN.
4. Estudie la documentación del método ON () y comience a rastrear el evento TimeUpdate: actualización del tiempo de reproducción.
5. Mantenga el tiempo de juego en una instalación de almacenamiento local. Deje que la tecla de almacenamiento sea "videoplayer-current-time" .
6. Use el método SetCurrentIme () para restaurar la reproducción desde la posición preservada al reiniciar la página.
7. Agregue al proyecto LOdash.throttle Biblilot y haga que el tiempo de renovación se renovara en el almacenamiento no más de una vez por segundo.

Tarea 3 - Forma de comentarios

HTML contiene marcado de forma. Escriba un script que almacene los valores de campo en el almacenamiento local cuando el usuario imprima algo.

 < form class =" feedback-form " autocomplete =" off " >
  < label >
    Email
    < input type =" email " name =" email " autofocus />
  </ label >
  < label >
    Message
    < textarea name =" message " rows =" 8 " > </ textarea >
  </ label >
  < button type =" submit " > Submit </ button >
</ form >

Complete esta tarea en 03-feedback.html y 03-feedback.js . Romperlo en algunas subcalls:

1. Rastree input en el formulario y cada vez registre el objeto con los campos de email y message en el repositorio local, que mantiene los valores actuales de los campos de formulario. Deje que la tecla de almacenamiento sea la línea "feedback-form-state" .
2. Al descargar la página, verifique el estado del repositorio, y si hay datos almacenados, complete los campos del formulario. De lo contrario, los campos deben estar vacíos.
3. Durante la subformación, se limpian el moldeo y los campos, así como la salida de la consola con el email , los campos message y sus valores actuales.
4. Asegúrese de que el almacenamiento se actualice no más de una vez cada 500 milisegundos. Para hacer esto, agregue al proyecto y use la biblioteca Lodash.throttle.

---

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.