goit js hw 11

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

接受标准

• 创建了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' ,
} ) ;

无尽的课

您可以在滚动时无休止地下载图像。我们为您提供实施的完全行动自由，您可以使用任何库。

---

包裹模板

这个项目是包裹的苏联。为了标记和调整以选择文档的锚定限制。

准备新项目

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中唯一的项目文件项目的生产。在相反的情况下，逻辑脚本将在问题中给出。