goit js hw 08

阅读其他语言：乌克兰，英语。

接受标准

• 创建了goit-js-hw-08 。
• 作业包含两个链接：在输出文件和GitHub Pages上的工作页面。
• 打开任务的生活页面时，控制台缺乏错误和警告。
• 该项目是使用包裹项目组装的。
• 该代码是使用Prettier制定的。

启动文件

在SRC文件夹中，您可以找到每个任务的启动文件，并使用Ready -MADE标记，样式和连接的脚本。通过完全替换包裹项目板中的src文件夹来将它们复制到项目中。为此，请下载所有这些存储库作为存档，或使用Downgit服务下载从存储库中下载单独的文件夹。

任务1- SimpleLightbox库

在01-gallery.html和01-gallery.js中完成此任务。将其分解为几个子呼叫：

1. 使用npm添加SimpleLightbox库作为项目依赖性（您过去工作的CDN引用不再需要）。
2. 使用以前的作业中使用JavaScript代码，但要进行反应，鉴于该库已通过npm安装（导入/导出语法）。

为了将CSS库代码连接到项目，您需要添加另一个导入，除非文档中所述。

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

任务2-视频PLEER

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. 匹配Node.js的计算机接触的LTS-version。如果需要，下载和机构。
2. 玻璃是存储库。
3. parcel-project-template纳什·纳什米（Nash Nashmi）。
4. 在GitHub上创建一个新的空存储库。
5. vScode中的Otkroi项目，启动Termine并在说明中使用GitHub存储库来牺牲项目。
6. npm install团队中项目的机构。
7. 启动复制模式，发布npm start命令。
8. 转到http：// localhost：1234上的浏览器。此图将被项目文件中的自动存储的人替换。

文件和文件夹

• 所有parshali文件样式都位于src/sass PAPQUET中，并在页面文件文件中导入。例如，对于index.html ，样式文件称为index.scss 。
• 识别src/images文件夹。 Chorusian对它们进行了优化，但仅在项目版本的遗憾中。一切都进入了您的计算机的视线，因此在薄弱的汽车上可能会有很多时间。

部署

为了调整DePaza项目，有必要在存储库的设置上绘制许多其他粗毛。来到Settings选项卡，在Actions订阅中选择General项目”。

将情节滑到帖子-Secia上，其中在图像的轨迹和Save的痕迹上将冰川片带到轨道上。如果没有勺子中的这些tunk，就会有毫无疑问的部署过程。

该项目的项目版本将是自动的，并在GITHUB页面上停止，在gh-pages潮湿中，COGD的时间已更新了main湿。例如，笔直的Pusha或泳池重新测试的Pusha或笔直的Pusha。为此，您需要提交一个package.json文件homepage和脚本build ，为您自己的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 ），如果这不是大量的自动，则将从gh-pages的文件夹/root中绘制文件文件的生产。

Depaza的状态

Yoditicator的自我偶像征服了部署极端通勤的状态。

• 黄疸- 项目的收藏和deplese。
• 绿色- 脱皮纸以彻底的结尾。
• 红色- 在棉绒时期，部署的勺子或部署。

有关状态的痛苦详细信息可以在图标中浸泡，并在Details上超过窗口开关。

现场情节

由于时间，几个舰队，我生活在剧情上，您可以在homepage中指示的地址煮熟。例如，我为此存储库的命令https://goitacademy.github.io/parcel-project-template。

如果打开了沙漠地块，以杀死NOR的Console Tab，以击杀CSS和JS项目文件（ 404 ）。在taby中静止为homepage的不规则含义或在文件package.json中build脚本。

这项工作如何

1. 每次推送后，都会启动来自.github/workflows/deploy.yml文件的特殊main （github操作）。
2. 所有文件存储库均在服务器上编译，该服务器是初始化项目的，并通过脱皮机前面的收获。
3. 如果所有步骤通过了太多，则在gh-pages Vet中唯一的项目文件项目的生产。在相反的情况下，逻辑脚本将在问题中给出。