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中唯一的項目文件項目的生產。在相反的情況下，邏輯腳本將在問題中給出。