goit js hw 08

他の言語を読んでください：ウクライナ人、英語。

受け入れ基準

• goit-js-hw-08が作成されました。
• 宿題には2つのリンクが含まれています。出力ファイルとGitHub Pagesの作業ページです。
• コンソールには、タスクのリビングページを開くときにエラーと警告がありません。
• このプロジェクトは、Parcel-Project-Templateを使用して組み立てられます。
• コードは、 Prettierを使用して策定されます。

ファイルを起動します

SRCフォルダーには、各タスクの準備が整ったマーキング、スタイル、接続されたスクリプトを備えた起動ファイルがあります。 Parcel-Project-Templateのsrcフォルダーを完全に交換して、プロジェクトにコピーします。これを行うには、このリポジトリをすべてアーカイブとしてダウンロードするか、ダウンギットサービスを使用してリポジトリから個別のフォルダーをダウンロードします。

タスク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-ビデオプレー

HTMLには、Vimeoプレーヤー向けのビデオが<iframe>れています。ビデオをローカルリポジトリに再生し続けるスクリプトを作成し、ページの再起動の後、この時点からビデオを再生し続けます。

 < 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 Libraryの文書に精通しましょう。
2. npmを通じてプロジェクトの依存としてライブラリを追加します。
3. Pre-Existent Playerセクションで説明されているように、スクリプトファイルのプレーヤーを初期化しますが、CDNではなくNPMパッケージとしてプレーヤーを追加していることに留意してください。
4. on（）メソッドのドキュメントを研究し、タイムアップデートイベントの追跡を開始します - 再生時間の更新。
5. 地元の保管施設で遊び時間を保管してください。ストレージキーを"videoplayer-current-time"とします。
6. SetCurrentime（）メソッドを使用して、ページを再起動するときに保存された位置から再現を復元します。
7. lodash.throttle biblilotのプロジェクトに追加し、1秒に1回しか収納で更新時間を更新します。

タスク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ミリ秒ごとにストレージが1回しか更新されないことを確認してください。これを行うには、プロジェクトに追加して、lodash.throttleライブラリを使用します。

---

小包テンプレート

このプロジェクトは小包のソスダンでした。ドキュメントのために選択される露出のアンカレッジのマーキングと調整のため。

新しいプロジェクトの準備

1. node.jsのコンピューターに巻き込まれたLTS-versionを一致させる必要に応じてダウンロードして機関をダウンロードしてください。
2. ガラスはリポジトリです。
3. parcel-project-templateナッシュナシュミ。
4. GitHubに新しい空のリポジトリを作成します。
5. vscodeのOtkroiプロジェクトは、ターミンを開始し、githubリポジタを使用してプロジェクトを犠牲にします。
6. ターミナルnpm installチームのプロジェクトの機関。
7. 再生モードを開始し、 npm startコマンドをリリースしました。
8. http：// localhost：1234のブラウザに移動します。このプロットは、プロジェクトファイルで自動貯蔵されたMan -madeに置き換えられます。

ファイルとフォルダー

• すべてのParshaliファイルスタイルは、 src/sassパプケにあり、ページのファイルファイルにインポートされています。たとえば、 index.htmlの場合、スタイルファイルはindex.scssと呼ばれます。
• src/imagesフォルダーに識別します。合唱団はそれらを最適化しますが、プロジェクトのプロジェクトバージョンの枯渇によってのみです。すべてがあなたのコンピューターの姿を見せているので、それは弱い車で多くの時間になる可能性があるためです。

展開する

プロジェクトDepazaを調整するには、リポジトリの設定に多くの追加のシャグを描く必要があります。 Settingsタブをご覧になり、 ActionsサブセクションでGeneralアイテムを選択します。

プロットをポストセシアにスライドさせます。この跡は、画像のトレースとSaveのためにトラックに撮影されます。スクープにこれらのタンクがなければ、展開のプロセスを自動化するための公開はありません。

プロジェクトのプロジェクトバージョンは自動化され、GITHUBページで停止します。GH gh-pages WETでは、COGDの時間がmainウェットで更新されます。たとえば、まっすぐなプッシャまたはプール再テストプッシャまたはストレートプッシャ。このために、 package.jsonファイルのhomepageとスクリプトbuildをファイルする必要があります。独自のyour_usernameとyour_repo_nameをmumfftし、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からファイルファイルの生成を引き出します。

デパザのステータス

極端な通勤の展開のステータスは、ヨディティカーターのエゴのアイコンによって征服されます。

• 黄und-プロジェクトのコレクションと枯渇。
• 緑色- デプロイは徹底的に終わりました。
• 赤い色- 糸くずの時代、展開のスクープまたは展開。

ステータスに関する痛みを伴う詳細情報は、アイコンに浸し、 Details Windowsスイッチを超えることができます。

ライブプロット

その時、数人の艦隊、私は陰謀を生きています、あなたはhomepageに示されている住所で煮ることができます。たとえば、私はこのリポジトリhttps://goitacademy.github.io/parcel-project-templateのマンドを生きています。

砂漠のプロットが開かれている場合、CSSおよびJSプロジェクトファイルの組み込まれたパックを見て、 Consoleタブを殺します（ 404 ）。コウノトリはすべて、 homepageの不規則な意味で、またはファイルpackage.jsonにスクリプトbuild 。

この作業はどうですか

1. プッシュごとに、 .github/workflows/deploy.ymlファイルからの特別なmain （githubアクション）が起動します。
2. すべてのファイルリポジタはサーバーにコンパイルされ、プロジェクトが初期化され、デプロの前で収穫を通過します。
3. すべての手順が非常に渡された場合、 gh-pages Vetでのプロジェクトファイルプロジェクトの唯一の生産。反対の場合、ロジックスクリプトでは問題に示されます。