goit js hw 11

Baca dalam bahasa lain: Ukraina, Inggris.

Kriteria penerimaan

• Repositori goit-js-hw-11 dibuat.
• Pekerjaan rumah berisi dua tautan: pada file output dan halaman kerja di GitHub Pages .
• Konsol ini tidak memiliki kesalahan dan peringatan saat membuka halaman hidup dari tugas tersebut.
• Proyek ini dirakit menggunakan parcel-project-template.
• Perpustakaan Axios digunakan untuk permintaan HTTP.
• Sintaks async/await digunakan.
• Perpustakaan notiflix digunakan untuk pesan.
• Kode ini diformulasikan menggunakan Prettier .

Tugasnya adalah menemukan gambar

Buat bagian depan aplikasi pencarian dan tampilan gambar dengan kata kunci. Tambahkan desain elemen antarmuka. Lihat Demo-Video Aplikasi.

Image- Search-pp-dmo.mp4

Formulir pencarian

Formulir pertama kali berisi dalam dokumen HTML. Pengguna akan memasukkan baris untuk mencari ke dalam kotak teks, dan bentuk formulir harus dibuat dengan permintaan 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

Gunakan Pixabay Public API untuk mendapatkan dukungan. Daftarkan, dapatkan kunci akses unik Anda dan berkenalkan dengan dokumentasi.

Daftar opsi string kueri yang harus Anda tunjukkan:

• key adalah kunci akses unik Anda ke API.
• q adalah istilah untuk pencarian. Apa yang akan dimasukkan pengguna.
• image_type - Jenis gambar. Hanya foto yang dibutuhkan, jadi letakkan photo .
• orientation - Orientasi foto. Letakkan nilai horizontal .
• safesearch - Filter berdasarkan usia. Tempatkan nilai true .

Jawabannya adalah serangkaian gambar yang memenuhi kriteria parameter kueri. Setiap gambar dijelaskan oleh objek dari mana Anda hanya tertarik pada properti berikut:

• webformatURL - tautan ke gambar kecil untuk daftar kartu.
• largeImageURL - Tautan ke gambar besar.
• tags - Baris dengan deskripsi gambar. Cocok untuk alt atribut.
• likes - jumlah suka.
• views - Jumlah tampilan.
• comments - Jumlah komentar.
• downloads - Jumlah unduhan.

Jika dukungan mengembalikan array kosong, maka tidak ada yang cocok ditemukan. Dalam hal ini, tampilkan pesan dengan teks "Sorry, there are no images matching your search query. Please try again." . Gunakan pustaka notiflix untuk pesan.

Galeri dan Kartu Gambar

Elemen div.gallery pertama kali terkandung dalam dokumen HTML, dan harus disewa untuk tanda kartu gambar. Saat mencari kata kunci baru, Anda harus sepenuhnya membersihkan isi galeri agar tidak mencampur hasilnya.

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

Template markup kartu dari satu gambar untuk galeri.

 < 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 > 

Pagination

Pixabay API mendukung pagination dan menyediakan parameter page dan per_page . Pastikan setiap jawaban datang 40 objek (default 20).

• Nilai awal parameter page harus 1 .
• Dengan setiap permintaan berikutnya, itu harus ditingkatkan sebesar 1 .
• Saat mencari kata kunci baru, nilai page harus dikembalikan ke yang asli, karena akan ada bulu pada koleksi gambar baru.

Dokumen HTML sudah berisi tanda tombol, pada klik yang Anda butuhkan untuk membuat permintaan untuk grup gambar berikutnya dan menambahkan tanda ke elemen galeri yang ada.

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

• Dalam keadaan awal, tombol harus disembunyikan.
• Setelah permintaan pertama, tombol muncul di antarmuka di bawah galeri.
• Dalam hal re -sub -form, tombol pertama -tama disembunyikan, dan setelah permintaan ditampilkan lagi.

Sebagai tanggapan, Backing mengembalikan properti totalHits - jumlah total gambar yang memenuhi kriteria pencarian (untuk akun gratis). Jika pengguna telah mencapai akhir koleksi, sembunyikan tombol dan keluarkan pesan dengan teks "We're sorry, but you've reached the end of search results." .

Selain itu

️ Fungsionalitas berikut tidak diperlukan untuk tugas tersebut, tetapi akan menjadi praktik tambahan yang baik.

Pesan

Setelah permintaan pertama dengan setiap pencarian baru, dapatkan pesan yang akan mengatakan berapa banyak gambar yang ditemukan ( totalHits ). Teks Pesan - "Hooray! We found totalHits images."

Perpustakaan SimpleLightbox

Tambahkan versi besar dari gambar dengan perpustakaan SimpleLightBox untuk galeri penuh.

• Penandaan perlu membungkus setiap kartu gambar di tautan, seperti yang ditunjukkan dalam dokumentasi.
• Perpustakaan berisi mattode refresh() , yang harus dipanggil setiap kali grup gambar baru ditambahkan.

Untuk menghubungkan kode perpustakaan CSS ke proyek, Anda perlu menambahkan impor lain, kecuali seperti yang dijelaskan dalam dokumentasi.

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

Menggulir halaman

Buat pengguliran halaman yang mulus setelah meminta dan memainkan setiap grup gambar berikutnya. Ini kode kode, tetapi pahami sendiri.

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

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

Kelas tanpa akhir

Alih -alih tombol Load More, Anda dapat melakukan unduhan gambar tanpa akhir saat menggulir. Kami memberi Anda kebebasan bertindak penuh dalam implementasi, Anda dapat menggunakan perpustakaan apa pun.

---

Template parsel

Proyek ini adalah Sozdan di Parcel. Untuk penandaan dan penyesuaian pelabuhan paparan dipilih untuk dokumentasi.

Persiapan proyek baru

1. Cocokkan LTS-versi LTS Node.js. Unduh dan Institusi jika perlu.
2. Kaca adalah repositori.
3. parcel-project-template Nash Nashmi.
4. Buat repositori kosong baru di GitHub.
5. Proyek OTKROI di vScode, mulai termine dan mengorbankan proyek dengan repositor github pada instruksi.
6. Lembaga proyek di tim npm install .
7. Mulai mode reproduksi, merilis perintah npm start .
8. Pergi ke browser di http: // localhost: 1234. Plot ini akan digantikan oleh pria yang disimpan secara otomatis dalam file proyek.

File dan folder

• Semua gaya file parshali terletak pada papquet src/sass dan diimpor dalam file file halaman. Misalnya, untuk index.html file gaya disebut index.scss .
• Identifikasi ke folder src/images . Chorusia mengoptimalkan mereka, tetapi hanya dengan penyebaran versi proyek proyek. Semuanya masuk ke pemandangan komputer Anda, sehingga bisa menjadi banyak waktu pada mobil yang lemah.

MENYEBARKAN

Untuk menyesuaikan Project Depaza, perlu untuk menarik banyak shag tambahan pada pengaturan repositori Anda. Ayo tab Settings dan di subsecations Actions Pilih item General .

Geser plot ke pos -secia, di mana Opacia diambil di trek pada jejak gambar dan demi Save . Tanpa tunks ini di sendok, akan ada ketidaksopanan untuk mengotomatisasi proses yang digunakan.

Versi proyek proyek akan otomatis dan dihentikan di halaman GitHub, di gh-pages Wet, waktu COGD diperbarui basah main . Misalnya, Pusha lurus atau pusha yang dicatat di kolam renang atau pusha lurus. Untuk ini, Anda perlu mengajukan package.json file homepage dan build skrip, meredam your_username dan your_repo_name untuk Anda sendiri, dan kirim nama di github.

 "homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
  "build" : " parcel build src/*.html --public-url /your_repo_name/ "
},

Hampir masuk ke tuning gitub-repositori ( Settings > Pages ) dan akan menarik produksi file file dari folder /root gh-pages , jika ini tidak banyak otomatis.

Status Depaza

Status penyebaran komuter ekstrem ditaklukkan oleh ikon ego yoditicator.

• The Crossice - The Collection and Deplese of the Project.
• Warna Hijau - Deploi berakhir secara menyeluruh.
• Warna Merah - Pada saat serat, sendok atau penyebaran penyebaran.

Informasi terperinci yang menyakitkan tentang status dapat direndam di ikon, dan di luar sakelar Windows pada Details .

Plot langsung

Karena waktu, beberapa armada, saya hidup plot, Anda dapat mendidih di alamat yang ditunjukkan dalam homepage . Misalnya, saya menjalani mand untuk repositori ini https://goitacademy.github.io/parcel-project-template.

Jika plot gurun dibuka, untuk membunuh tab Console NOR untuk melihat paket yang dimasukkan dari file proyek CSS dan JS ( 404 ). Stork All in Taby Arti yang tidak teratur dari homepage atau build skrip di file package.json .

Bagaimana ini bekerja

1. Setelah setiap dorongan, main khusus (tindakan github) dari file .github/workflows/deploy.yml diluncurkan.
2. Semua file repositor dikompilasi di server, di mana proyek diinisialisasi dan melewati panen di depan deplo.
3. Jika semua langkah berlalu begitu banyak, satu-satunya produksi proyek file proyek di dokter hewan gh-pages . Dalam kasus yang berlawanan, dalam skrip logika akan diberikan dalam masalah.