goit js hw 11下載goit js hw 11源代碼下載

goit js hw 11

其他源碼

1.0.0

下載

閱讀其他語言：烏克蘭，英語。

接受標準

創建了goit-js-hw-11存儲庫。
作業包含兩個鏈接：在輸出文件和GitHub Pages上的工作頁面。
打開任務的生活頁面時，控制台缺乏錯誤和警告。
該項目是使用包裹項目組裝的。
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公共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 >

畫廊的一個圖像的卡片標記模板。

 < 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." 。

此外

配x任務不需要以下功能，但將是一個很好的額外練習。

資訊

在每次新搜索的第一個請求之後，獲取一條消息，該消息將說明發現了多少張圖像（ totalHits ）。消息文字 - "Hooray! We found totalHits images."

`SimpleLightbox`庫

使用SimpleLightbox庫添加大型圖像，以提供完整的圖庫。

如文檔所示，標記將需要將每個圖像卡包裹在鏈接中。
該庫包含一個refresh() Mattode，每次添加新圖像組時，都必須稱呼它。

為了將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' ,
} ) ;

無盡的課

您可以在滾動時無休止地下載圖像。我們為您提供實施的完全行動自由，您可以使用任何庫。

包裹模板

這個項目是包裹的蘇聯。為了標記和調整以選擇文檔的錨定限制。

準備新項目

匹配Node.js的計算機接觸的LTS-version。如果需要，下載和機構。
玻璃是存儲庫。
parcel-project-template納什·納什米（Nash Nashmi）。
在GitHub上創建一個新的空存儲庫。
vScode中的Otkroi項目，啟動Termine並在說明中使用GitHub存儲庫來犧牲項目。
npm install團隊中項目的機構。
啟動複製模式，發布npm start命令。
轉到http：// localhost：1234上的瀏覽器。此圖將被項目文件中的自動存儲的人替換。

文件和文件夾

所有parshali文件樣式都位於src/sass PAPQUET中，並在頁面文件文件中導入。例如，對於index.html ，樣式文件稱為index.scss 。
識別src/images文件夾。 Chorusian對它們進行了優化，但僅在項目版本的遺憾中。一切都進入了您的計算機的視線，因此在薄弱的汽車上可能會有很多時間。

部署

為了調整DePaza項目，有必要在存儲庫的設置上繪製許多其他粗毛。來到Settings選項卡，在Actions訂閱中選擇General項目”。

GitHub操作設置

將情節滑到帖子-Secia上，其中在圖像的軌跡和Save的痕跡上將冰川片帶到軌道上。如果沒有勺子中的這些tunk，就會有毫無疑問的部署過程。

GitHub操作設置

該項目的項目版本將是自動的，並在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中繪製文件文件的生產。

GitHub頁面設置