goit js hw 11 ดาวน์โหลด - goit js hw 11 แหล่งที่มาดาวน์โหลด

goit js hw 11

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

อ่านในภาษาอื่น ๆ : ยูเครน, อังกฤษ

เกณฑ์การยอมรับ

ที่เก็บ goit-js-hw-11 ถูกสร้างขึ้น
การบ้านมีสองลิงก์: บนไฟล์เอาต์พุตและหน้างานใน GitHub Pages
คอนโซลขาดข้อผิดพลาดและคำเตือนเมื่อเปิดหน้าชีวิตของงาน
โครงการประกอบขึ้นโดยใช้พัสดุภัณฑ์-โครงการ
Axios Library ใช้สำหรับคำขอ 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

ใช้ API สาธารณะ Pixabay สำหรับการสนับสนุน ลงทะเบียนรับคีย์การเข้าถึงที่ไม่ซ้ำกันของคุณและทำความคุ้นเคยกับเอกสาร

รายการตัวเลือกสตริงแบบสอบถามที่คุณต้องระบุ:

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 ปุ่มจะถูกซ่อนไว้เป็นครั้งแรกและหลังจากคำขอจะปรากฏขึ้นอีกครั้ง

ในการตอบสนองการสำรองข้อมูลจะส่งคืนคุณสมบัติ totalHits - จำนวนภาพทั้งหมดที่ตรงตามเกณฑ์การค้นหา (สำหรับบัญชีฟรี) หากผู้ใช้ถึงจุดสิ้นสุดของคอลเลกชันให้ซ่อนปุ่มและส่งข้อความด้วยข้อความ "We're sorry, but you've reached the end of search results." -

นอกจากนี้

ฟังก์ชั่นต่อไปนี้ไม่จำเป็นสำหรับงาน แต่จะเป็นการฝึกฝนที่ดี

ข้อความ

หลังจากคำขอครั้งแรกกับการค้นหาใหม่แต่ละครั้งรับข้อความที่จะบอกว่าพบภาพจำนวนเท่าใด ( totalHits ) ข้อความข้อความ - "Hooray! We found totalHits images."

ไลบรารี `SimpleLightbox`

เพิ่มภาพเวอร์ชันขนาดใหญ่ด้วยไลบรารี SimpleLightBox สำหรับแกลเลอรี่เต็มรูปแบบ

การทำเครื่องหมายจะต้องห่อการ์ดรูปภาพแต่ละใบในลิงค์ตามที่ระบุไว้ในเอกสาร
ไลบรารีมี Mattode 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' ,
} ) ;

ชั้นเรียนไม่มีที่สิ้นสุด

แทนที่จะเป็นปุ่มโหลดเพิ่มเติมคุณสามารถดาวน์โหลดรูปภาพได้อย่างไม่สิ้นสุดขณะเลื่อน เราให้อิสระในการดำเนินการอย่างเต็มที่ในการดำเนินการคุณสามารถใช้ห้องสมุดใด ๆ

เทมเพลตพัสดุ

โครงการนี้เป็น Sozdan ที่พัสดุ สำหรับการทำเครื่องหมายและการปรับตัวของจุดยึดของการเปิดรับที่จะเลือกสำหรับเอกสาร

การเตรียมโครงการใหม่

จับคู่ LTS-version ของ Node.Js ดาวน์โหลดและสถาบันหากจำเป็น
แก้วเป็นที่เก็บ
parcel-project-template แนชชี่
สร้างที่เก็บว่างเปล่าใหม่บน GitHub
โครงการ Otkroi ใน VSCODE เริ่มต้นเทอร์มินและเสียสละโครงการด้วย Repositors GitHub ตามคำแนะนำ
สถาบันของโครงการในทีม npm install
เริ่มโหมดการทำซ้ำปล่อยคำสั่ง npm start
ไปที่เบราว์เซอร์บน http: // localhost: 1234 พล็อตนี้จะถูกแทนที่ด้วย man ที่จัดเก็บอัตโนมัติ -ทำในไฟล์โครงการ

ไฟล์และโฟลเดอร์

รูปแบบไฟล์ parshali ทั้งหมดอยู่ใน src/sass Papquet และนำเข้าในไฟล์ไฟล์ของหน้า ตัวอย่างเช่นสำหรับ index.html ไฟล์สไตล์เรียกว่า index.scss
ระบุไปยังโฟลเดอร์ src/images Chorusian ปรับให้เหมาะสม แต่ด้วยการลดลงของโครงการโครงการ ทุกอย่างเข้ามาในสายตาของคอมพิวเตอร์ของคุณดังนั้นอาจมีเวลามากในรถที่อ่อนแอ

ปรับใช้

ในการปรับโครงการ DePaza จำเป็นต้องดึง Shags เพิ่มเติมจำนวนมากเกี่ยวกับการตั้งค่าที่เก็บของคุณ มาบนแท็บ Settings และในการ Actions ย่อยให้เลือกรายการ General

การตั้งค่าการกระทำของ GitHub

เลื่อนพล็อตไปยังโพสต์ -Secia ซึ่ง opacia ถูกนำมาใช้ในการติดตามบนร่องรอยของภาพและเห็นแก่ Save หากไม่มี tunks เหล่านี้ใน scoops จะมีความไม่แน่นอนสำหรับการทำให้กระบวนการของการปรับใช้เป็นไปโดยอัตโนมัติ

การตั้งค่าการกระทำของ GitHub

เวอร์ชันโครงการของโครงการจะเป็นไปโดยอัตโนมัติและหยุดบนหน้า GitHub ใน gh-pages WET เวลาของ COGD จะได้รับการอัปเดต main เปียกชื้น ตัวอย่างเช่น pusha ตรงหรือ pusha ที่ถูกทดสอบโดยสระว่ายน้ำหรือ pusha ตรง สำหรับสิ่งนี้คุณต้องยื่น homepage ของไฟล์ package.json และ build สคริปต์, muffled 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 ( Settings > Pages ) และจะดึงการผลิตไฟล์ไฟล์จากโฟลเดอร์ /root ของ gh-pages หากถ้านี่ไม่ใช่อัตโนมัติมาก

การตั้งค่าหน้า GitHub

สถานะของ DePaza

สถานะของการปรับใช้การเดินทางที่รุนแรงนั้นถูกยึดครองโดยไอคอนของอัตตาของ Yoditicator

The Jaundice - คอลเลกชันและความผิดพลาดของโครงการ
สีเขียว - dePloi สิ้นสุดลงอย่างทั่วถึง
สีแดง - ในช่วงเวลาของผ้าสำลีตักหรือการปรับใช้ของการปรับใช้

ข้อมูลรายละเอียดที่เจ็บปวดเกี่ยวกับสถานะสามารถแช่ในไอคอนและในสวิตช์ Windows ที่เกินใน Details

สถานะการปรับใช้

พล็อตสด

เนื่องจากเวลามีกองยานสองสามตัวฉันใช้ชีวิตพล็อตคุณสามารถเคี่ยวตามที่อยู่ที่ระบุไว้ใน homepage ตัวอย่างเช่นฉันใช้ชีวิตแมนสำหรับที่เก็บ https://goitacademy.github.io/parcel-project-template

หากมีการเปิดพล็อตของทะเลทรายเพื่อฆ่าแท็บ Console ของ NOR เพื่อสายตาของแพ็คที่จัดทำขึ้นของไฟล์โครงการ CSS และ JS ( 404 ) นกกระสาทั้งหมดในความหมายที่ผิดปกติของ homepage หรือ build สคริปต์ในไฟล์ package.json

งานนี้เป็นอย่างไร

มันทำงานอย่างไร

หลังจากการกดทุกครั้งจะมีการเปิด main สคริปต์พิเศษ (GitHub) จากไฟล์. .github/workflows/deploy.yml
repositor ไฟล์ทั้งหมดจะถูกรวบรวมบนเซิร์ฟเวอร์ซึ่งโครงการเริ่มต้นและผ่านการเก็บเกี่ยวที่ด้านหน้าของ DEPLO
หากทุกขั้นตอนผ่านไปมากการผลิต แต่เพียงผู้เดียวของโครงการไฟล์โครงการใน gh-pages VET ในกรณีตรงกันข้ามในสคริปต์ลอจิกจะได้รับในปัญหา

ขยาย

ข้อมูลเพิ่มเติม