goit js hw 08

Читать на других языках: украинский, английский.

Критерии принятия

• goit-js-hw-08 был создан.
• Домашнее задание содержит две ссылки: в выходных файлах и рабочей странице на GitHub Pages .
• Консоли не хватает ошибок и предупреждений при открытии живой страницы задачи.
• Проект собирается с использованием посылок-проекта-образец.
• Код сформулирован с использованием Prettier .

Начальные файлы

В папке SRC вы найдете начальные файлы с готовыми маркировками, стилями и подключенными сценариями для каждой задачи. Скопируйте их в проект, полностью заменив папку src в Parcel-Project-Template. Для этого загрузите все это хранилище в качестве архива или используйте службу DownGit, чтобы загрузить отдельную папку из репозитория.

Задача 1 - Библиотека SimpleLightbox

Выполните эту задачу в 01-gallery.html и 01-gallery.js . Разбейте его на несколько подзадачи:

1. Добавьте библиотеку SimpleLightbox в качестве зависимости проекта с использованием npm (ссылки на CDN из вашей прошлой работы больше не требуются).
2. Используйте свой код JavaScript из предыдущей домашней работы, но сделайте реактору, учитывая, что библиотека была установлена ​​через npm (синтаксис импорта/экспорта).

Чтобы подключить код библиотеки CSS к проекту, вам необходимо добавить еще один импорт, за исключением случаев, описанных в документации.

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

Задача 2 - Видеосох

HTML содержит <iframe> с видео для Vimeo Player. Напишите сценарий, который будет поддерживать видео в локальном репозитории, и после перезапуска страницы продолжайте воспроизводить видео с этого времени.

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

Выполните эту задачу в 02-video.html и 02-video.js . Разбейте его на несколько подзадачи:

1. Давайте познакомимся с документацией библиотеки Vimeo.
2. Добавьте библиотеку в качестве зависимости проекта через npm .
3. Инициализируйте игрока в файле скрипта, как описано в разделе «Предстоящий игрок», но имейте в виду, что у вас есть игрок, добавленный в качестве пакета NPM, а не через CDN.
4. Изучите документацию метода on () и начните отслеживать событие TimeUpdate - обновление времени воспроизведения.
5. Держите время в местном хранилище. Пусть ключ хранилища будет "videoplayer-current-time" .
6. Используйте метод setcurrentime (), чтобы восстановить воспроизведение из сохранившейся позиции при перезапуске страницы.
7. Добавьте к проекту Lodash.Throttle Biblilot и сделайте время обновления в хранилище не раз в секунду.

Задача 3 - форма обратной связи

HTML содержит маркировку формы. Напишите сценарий, который будет хранить значения поля в локальном хранилище, когда пользователь что -то печатает.

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

Завершите эту задачу в 03-feedback.html и 03-feedback.js . Разбейте его на несколько подзадачи:

1. Отслеживайте input событие в форме, и каждый раз записывайте объект с полями email и message в локальном репозитории, которые сохраняют текущие значения полей формы. Пусть ключ хранения будет линейкой "feedback-form-state" .
2. При загрузке страницы проверьте статус репозитория, и если есть сохраненные данные, заполните поля формы. В противном случае поля должны быть пустыми.
3. Во время суб -формы очищаются литья и поля, а также вывод консоли с email , полями message и их текущими значениями.
4. Убедитесь, что хранилище обновляется не раз каждые 500 миллисекунд. Для этого добавьте в проект и используйте библиотеку Lodash.Throttle.

---

Шаблон посылки

Этот проект был Созданом в посылке. Для маркировки и корректировки якорной установки для выбора для документации.

Подготовка нового проекта

1. Сопоставление в компьютере LTS-версия Node.js. Скачать и учреждения, если это необходимо.
2. Стекло репозиторий.
3. parcel-project-template Nash Nashmi.
4. Создайте новый пустой репозиторий на GitHub.
5. Проект OTKROI в VSCODE, запустите термин и пожертвуйте проектом с помощью репозиторов GitHub по инструкциям.
6. Учреждения проекта в команде Terminal npm install .
7. Запустите режим воспроизведения, выпустил команду npm start .
8. Перейдите в браузер на http: // localhost: 1234. Этот сюжет будет заменен автоматическим искусственным человеком в файлах проекта.

Файлы и папки

• Все стили файлов Parshali лежат в 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 , если это не так много автоматического.

Статус Депазы

Статус развертывания экстремального коммутирования завоеван иконой эго йодитатора.

• Желтуя - коллекция и депленка проекта.
• Зеленый цвет - Deploi закончился тщательно.
• Красный цвет - во времена пронзака, совок или развертывание развертывания.

Болезненная подробная информация о статусе может быть пропитана в значке, а в превышении переключателя Windows в Details .

Живой сюжет

Из -за времени, пара флотов, я живу сюжетом, вы можете варить на адресу, указанном в homepage . Например, я живу мандатом для этого хранилища https://goitacademy.github.io/parcel-project-template.

Если открыт заговор по пустыне, чтобы убить Console вкладку NO NO до вида включенных пакетов файлов проекта CSS и JS ( 404 ). Аист все в табичном нерегулярном значении homepage или сценария build в файловом package.json .

Как это работает

1. После каждого толчка запускается main скрипт (действие GitHub) из файла .github/workflows/deploy.yml .
2. Все репозиторы файлов собираются на сервере, где проект инициализируется, и передает урожай перед Deplo.
3. Если все шаги прошли так много, единственное производство проектных файловых проектов в ветеринаре gh-pages . В противоположном случае в сценарии логики будет дано в проблеме.