goit js hw 11

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

受け入れ基準

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

タスクは画像を見つけることです

キーワードによる画像の検索と表示の適用の前面を作成します。インターフェイス要素の設計を追加します。アプリケーションのデモビデオを参照してください。

Image-search-pp-dmo.mp4

検索フォーム

フォームには、最初にHTMLドキュメントに含まれています。ユーザーはテキストボックスに検索する行を入力し、フォームのフォームをHTTPリクエストで作成する必要があります。

 < form class =" search-form " id =" search-form " >
  < input
    type =" text "
    name =" searchQuery "
    autocomplete =" off "
    placeholder =" Search images... "
  />
  < button type =" submit " > Search </ button >
</ form > 

http-ask

バッキングにはPixabay Public APIを使用します。登録して、一意のアクセスキーを取得し、ドキュメントに精通してください。

あなたが示す必要があるクエリ文字列オプションのリスト：

• keyは、APIへのユニークなアクセスキーです。
• q検索の用語です。ユーザーが入力するもの。
• image_type画像タイプ。写真のみが必要なので、 photoを載せてください。
• orientation - 写真の向き。 horizontalの値を置きます。
• safesearch - 年齢ごとにフィルター。 true値を置きます。

答えは、クエリパラメーターの基準を満たす画像の配列です。各画像は、次のプロパティにのみ興味があるオブジェクトによって説明されています。

• webformatURLカードリストの小さな画像へのリンク。
• largeImageURL大きな画像へのリンク。
• tags - 画像の説明付きの行。属性altに適しています。
• likes - いいね。
• views - ビューの数。
• comments - コメントの数。
• downloads - ダウンロード数。

バッキングが空の配列を返す場合、適切なものは見つかりませんでした。この場合、 "Sorry, there are no images matching your search query. Please try again."テキストにメッセージを表示します。 。メッセージにはnotiflixライブラリを使用します。

ギャラリーとイメージカード

div.gallery要素は最初にHTMLドキュメントに含まれており、画像カードのマーキング用にレンタルする必要があります。新しいキーワードを検索するときは、結果を混ぜないようにギャラリーの内容を完全にクリーニングする必要があります。

 < div class =" gallery " >
  <!-- Картки зображень -->
</ div >

ギャラリーの1つの画像のカードマークアップテンプレート。

 < div class =" photo-card " >
  < img src ="" alt ="" loading =" lazy " />
  < div class =" info " >
    < p class =" info-item " >
      < b > Likes </ b >
    </ p >
    < p class =" info-item " >
      < b > Views </ b >
    </ p >
    < p class =" info-item " >
      < b > Comments </ b >
    </ p >
    < p class =" info-item " >
      < b > Downloads </ b >
    </ p >
  </ div >
</ div > 

ページネーション

Pixabay APIはページネーションをサポートし、 pageとper_pageパラメーターを提供します。各回答が40のオブジェクトにあることを確認してください（デフォルト20）。

• pageパラメーターの初期値は1なければなりません。
• その後のリクエストごとに、 1増加する必要があります。
• 新しいキーワードを検索するときは、新しい画像コレクションにフリースがあるため、 page値を元のキーワードに返す必要があります。

HTMLドキュメントには、次の画像グループをリクエストし、ギャラリーの既存の要素にマーキングを追加する必要があるクリック時に、ボタンマークが既に含まれています。

 < button type =" button " class =" load-more " > Load more </ button >

• 初期状態では、ボタンを非表示にする必要があります。
• 最初のリクエストの後、ボタンはギャラリーの下のインターフェイスに表示されます。
• re -sub -formの場合、ボタンが最初に非表示になり、リクエストの後に再度表示されます。

これに応じて、バッキングはtotalHitsプロパティ（検索基準を満たす画像の総数）を返します（無料アカウントの場合）。ユーザーがコレクションの最後に到達した場合は、ボタンを非表示にして、 "We're sorry, but you've reached the end of search results." 。

さらに

ショ和タスクには次の機能は必要ありませんが、適切な追加の練習になります。

メッセージ

新しい検索ごとに最初のリクエストの後、画像の数（ totalHits ）が見つかったメッセージを表示します。メッセージテキスト - "Hooray! We found totalHits images."

SimpleLightboxライブラリ

Full -Fledged Galleryのために、SimpleLightboxライブラリを使用して画像の大きなバージョンを追加します。

• マーキングは、ドキュメントに示されているように、リンクに各画像カードをラップする必要があります。
• ライブラリには、新しい画像グループが追加されるたびに呼び出される必要がありrefresh() 。

CSSライブラリコードをプロジェクトに接続するには、ドキュメントで説明されている場合を除き、別のインポートを追加する必要があります。

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

ページのスクロール

後続の各画像グループを要求して再生した後、ページのスムーズなスクロールを作成します。これがコードコードですが、自分で理解してください。

 const { height : cardHeight } = document
  . querySelector ( '.gallery' )
  . firstElementChild . getBoundingClientRect ( ) ;

window . scrollBy ( {
  top : cardHeight * 2 ,
  behavior : 'smooth' ,
} ) ;

無限のクラス

ボタンを追加する代わりに、スクロール中に画像を無限にダウンロードすることができます。実装において完全な行動の自由を提供します。任意のライブラリを使用できます。

---

小包テンプレート

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

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

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でのプロジェクトファイルプロジェクトの唯一の生産。反対の場合、ロジックスクリプトでは問題に示されます。