goit js hw 08

Leia em outros idiomas: Ucraniano, inglês.

Critérios de aceitação

• Foi criado goit-js-hw-08 .
• O trabalho de casa contém dois links: nos arquivos de saída e uma página de trabalho nas GitHub Pages .
• O console carece de erros e avisos ao abrir uma página viva da tarefa.
• O projeto é montado usando o PARCEL-Project-Template.
• O código é formulado usando Prettier .

Arquivos de partida

Na pasta SRC, você encontrará arquivos de partida com marcas, estilos e scripts conectados para cada tarefa. Copie-os no projeto substituindo completamente a pasta src no Pedro-Project-Template. Para fazer isso, faça o download de todo esse repositório como um arquivo ou use o serviço de downgit para baixar uma pasta separada do repositório.

Tarefa 1 - Biblioteca SimpleLightbox

Conclua esta tarefa em 01-gallery.html e 01-gallery.js . Quebre -o em alguns sub -calls:

1. Adicione a biblioteca SimpleLightBox como uma dependência do projeto usando npm (as referências da CDN do seu trabalho passado não são mais necessárias).
2. Use seu código JavaScript no dever de casa anterior, mas faça o reator, já que a biblioteca foi instalada através npm (sintaxe de importação/exportação).

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

Tarefa 2 - Pleer de vídeo

O HTML contém <iframe> com vídeo para o Vimeo Player. Escreva um script que mantenha o vídeo reproduzido em um repositório local e, após uma página reiniciar, continuará reproduzindo vídeo a partir deste momento.

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

Conclua esta tarefa em 02-video.html e 02-video.js . Quebre -o em alguns sub -calls:

1. Vamos nos familiarizar com a documentação da biblioteca Vimeo.
2. Adicione a biblioteca como uma dependência do projeto através npm .
3. Inicialize o player no arquivo de script, conforme descrito na seção de jogadores pré-existentes, mas lembre-se de que você tem um jogador adicionado como um pacote NPM, não através do CDN.
4. Estude a documentação do método on () e comece a rastrear o evento TimeUpdate - atualizando o tempo de reprodução.
5. Mantenha o tempo de jogo em uma instalação de armazenamento local. Que a chave de armazenamento seja "videoplayer-current-time" .
6. Use o método setCurREntime () para restaurar a reprodução da posição preservada ao reiniciar a página.
7. Adicione ao projeto Lodash.Trottle Biblilot e torne o tempo de renovação renovado no armazenamento não mais que uma vez por segundo.

Tarefa 3 - Forma de feedback

HTML contém marcação de formulário. Escreva um script que armazenará os valores de campo no armazenamento local quando o usuário imprime alguma coisa.

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

Conclua esta tarefa em 03-feedback.html e 03-feedback.js . Quebre -o em alguns sub -calls:

1. Acompanhe input no formulário e, cada vez, registre o objeto com os campos de email e message no repositório local, que mantêm os valores atuais dos campos do formulário. Deixe a chave de armazenamento ser a linha "feedback-form-state" .
2. Ao baixar a página, verifique o status do repositório e, se houver dados armazenados, preencha os campos do formulário. Caso contrário, os campos devem estar vazios.
3. Durante a sub -forma, a moldagem e os campos são limpos, bem como a saída do console com o email , os campos message e seus valores atuais.
4. Certifique -se de que o armazenamento seja atualizado não mais de uma vez a cada 500 milissegundos. Para fazer isso, adicione ao projeto e use a biblioteca Lodash.Throttle.

---

Modelo de encomenda

Este projeto foi um Sozdan em Parcel. Para a marcação e ajuste da ancoragem da exposição, a ser selecionada para documentação.

Preparação de um novo projeto

1. Combine o LTS-Versão de Node.JS. Download e instituições, se for necessário.
2. O vidro é repositório.
3. parcel-project-template Nash Nashmi.
4. Crie um novo repositório vazio no Github.
5. Projeto Otkroi no VSCode, inicie o terminal e sacrifique o projeto com os repositores do GitHub em instruções.
6. Instituições do projeto na equipe npm install do terminal.
7. Inicie o modo de reprodução, liberou o comando npm start .
8. Vá para o navegador em http: // localhost: 1234. Este gráfico será substituído pelo homem de origem automático -feito nos arquivos do projeto.

Arquivos e pastas

• Todos os estilos de arquivo parshali estão no Papquet 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 .
• Identifique -se na pasta 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.

IMPLANTAR

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.

Status de DePaza

O status de uma implantação de uma comutação extrema é conquistada pelo ícone do ego do Yoditicator.

• A icterícia - A coleção e depleção do projeto.
• A cor verde - o deploi terminou completamente.
• A cor vermelha - no tempo do fiapo, a colher ou a implantação da implantação.

As informações detalhadas dolorosas sobre o status podem ser embebidas no ícone e no excedente do interruptor do Windows nos Details .

Enredo ao vivo

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 .

Como isso funciona

1. Após cada empurrão, main script especial (ação do github) do arquivo .github/workflows/deploy.yml é iniciado.
2. Todos os repositores de arquivos são compilados no servidor, onde o projeto é inicializado e passa a colheita na frente do esgotamento.
3. Se todas as etapas passaram tanto, a única produção dos projetos de arquivos do projeto projeta gh-pages . No caso oposto, no script lógico será apresentado no problema.