goit js hw 08

Baca dalam bahasa lain: Ukraina, Inggris.

Kriteria penerimaan

• goit-js-hw-08 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.
• Kode ini diformulasikan menggunakan Prettier .

File awal

Di folder SRC Anda akan menemukan file awal dengan tanda siap -siap, gaya, dan skrip yang terhubung untuk setiap tugas. Salin ke dalam proyek dengan sepenuhnya mengganti folder src di Parcel-Project-Template. Untuk melakukan ini, unduh semua repositori ini sebagai arsip atau gunakan layanan downgit untuk mengunduh folder terpisah dari repositori.

Tugas 1 - Perpustakaan SimpleLightbox

Selesaikan tugas ini di 01-gallery.html dan 01-gallery.js . Memecahnya menjadi beberapa sub -calls:

1. Tambahkan Perpustakaan SimpleLightBox sebagai Ketergantungan Proyek menggunakan npm (referensi CDN dari pekerjaan masa lalu Anda tidak lagi diperlukan).
2. Gunakan kode JavaScript Anda dari pekerjaan rumah sebelumnya, tetapi lakukan reaktoring, mengingat bahwa perpustakaan telah diinstal melalui npm (sintaks impor/ekspor).

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

Tugas 2 - Pleer Video

HTML berisi <iframe> dengan video untuk Vimeo Player. Tulis skrip yang akan membuat video diputar ke dalam repositori lokal dan, setelah halaman restart, terus putar video dari waktu ini.

 < iframe
  id =" vimeo-player "
  src =" https://player.vimeo.com/video/236203659 "
  width =" 640 "
  height =" 360 "
  frameborder =" 0 "
  allowfullscreen
  allow =" autoplay; encrypted-media "
> </ iframe >

Selesaikan tugas ini di 02-video.html dan 02-video.js . Memecahnya menjadi beberapa sub -calls:

1. Mari kita kenali dengan dokumentasi perpustakaan Vimeo.
2. Tambahkan perpustakaan sebagai ketergantungan proyek melalui npm .
3. Inisialisasi pemain dalam file skrip seperti yang dijelaskan di bagian pemain yang sudah ada sebelumnya, tetapi perlu diingat bahwa Anda memiliki pemain yang ditambahkan sebagai paket NPM, bukan melalui CDN.
4. Pelajari dokumentasi metode on () dan mulailah melacak acara TimeUpdate - memperbarui waktu pemutaran.
5. Simpan waktu bermain di fasilitas penyimpanan lokal. Biarkan kunci penyimpanan menjadi "videoplayer-current-time" .
6. Gunakan metode setCurrentime () untuk mengembalikan reproduksi dari posisi yang diawetkan saat memulai kembali halaman.
7. Tambahkan ke proyek Lodash.throttle Biblilot dan buat waktu pembaruan diperbarui di penyimpanan tidak lebih dari sekali sedetik.

Tugas 3 - Bentuk Umpan Balik

HTML berisi penandaan formulir. Tulis skrip yang akan menyimpan nilai bidang di penyimpanan lokal ketika pengguna mencetak sesuatu.

 < form class =" feedback-form " autocomplete =" off " >
  < label >
    Email
    < input type =" email " name =" email " autofocus />
  </ label >
  < label >
    Message
    < textarea name =" message " rows =" 8 " > </ textarea >
  </ label >
  < button type =" submit " > Submit </ button >
</ form >

Selesaikan tugas ini di 03-feedback.html dan 03-feedback.js . Memecahnya menjadi beberapa sub -calls:

1. Lacak acara input pada formulir, dan setiap kali mencatat objek dengan bidang email dan message di repositori lokal, yang menjaga nilai saat ini dari bidang formulir. Biarkan kunci penyimpanan menjadi garis "feedback-form-state" .
2. Saat mengunduh halaman, periksa status repositori, dan jika ada data yang disimpan, isi bidang formulir. Kalau tidak, bidang harus kosong.
3. Selama sub -form, cetakan dan bidang dibersihkan, serta output konsol dengan email , bidang message dan nilai -nilai mereka saat ini.
4. Pastikan penyimpanan diperbarui tidak lebih dari sekali setiap 500 milidetik. Untuk melakukan ini, tambahkan ke proyek dan gunakan perpustakaan Lodash.throttle.

---

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.