goit js hw 08

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

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

• goit-js-hw-08 ถูกสร้างขึ้น
• การบ้านมีสองลิงก์: บนไฟล์เอาต์พุตและหน้างานใน GitHub Pages
• คอนโซลขาดข้อผิดพลาดและคำเตือนเมื่อเปิดหน้าชีวิตของงาน
• โครงการประกอบขึ้นโดยใช้พัสดุภัณฑ์-โครงการ
• รหัสถูกกำหนดโดยใช้ Prettier

ไฟล์เริ่มต้น

ในโฟลเดอร์ SRC คุณจะพบไฟล์เริ่มต้นที่มีเครื่องหมายพร้อมทำเครื่องหมายสไตล์และสคริปต์ที่เชื่อมต่อสำหรับแต่ละงาน คัดลอกลงในโครงการโดยแทนที่โฟลเดอร์ src อย่างสมบูรณ์ใน Parcel-Project-Template ในการทำเช่นนี้ให้ดาวน์โหลดที่เก็บทั้งหมดนี้เป็นเก็บถาวรหรือใช้บริการ DOWGIT เพื่อดาวน์โหลดโฟลเดอร์แยกต่างหากจากที่เก็บ

ภารกิจที่ 1 - ไลบรารี SimpleLightbox

ทำงานนี้ให้เสร็จใน 01-gallery.html และ 01-gallery.js แบ่งออกเป็นไม่กี่สายย่อย:

1. เพิ่มไลบรารี SimpleLightBox เป็นการพึ่งพาโครงการโดยใช้ npm (การอ้างอิง CDN จากงานที่ผ่านมาของคุณไม่จำเป็นต้องใช้อีกต่อไป)
2. ใช้รหัส JavaScript ของคุณจากการบ้านก่อนหน้า แต่ทำปฏิกิริยาเนื่องจากไลบรารีได้รับการติดตั้งผ่าน npm (นำเข้า/ส่งออกไวยากรณ์)

ในการเชื่อมต่อรหัสไลบรารี CSS เข้ากับโครงการคุณต้องเพิ่มการนำเข้าอื่นยกเว้นตามที่อธิบายไว้ในเอกสารประกอบ

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

ภารกิจ 2 - วิดีโอ Pleer

HTML มี <iframe> พร้อมวิดีโอสำหรับ Vimeo Player เขียนสคริปต์ที่จะทำให้วิดีโอเล่นเป็นที่เก็บในท้องถิ่นและหลังจากรีสตาร์ทหน้าใหม่ให้เล่นวิดีโอต่อไปในเวลานี้

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

ทำงานนี้ให้เสร็จใน 02-video.html และ 02-video.js แบ่งออกเป็นไม่กี่สายย่อย:

1. มาทำความคุ้นเคยกับเอกสารของห้องสมุด Vimeo กันเถอะ
2. เพิ่มไลบรารีเป็นโครงการพึ่งพาผ่าน npm
3. เริ่มต้นผู้เล่นในไฟล์สคริปต์ตามที่อธิบายไว้ในส่วนผู้เล่นที่มีอยู่ก่อน แต่โปรดจำไว้ว่าคุณมีผู้เล่นเพิ่มเป็นแพ็คเกจ NPM ไม่ใช่ผ่าน CDN
4. ศึกษาเอกสารของวิธี ON () และเริ่มติดตามเหตุการณ์ TimeUpdate - อัปเดตเวลาเล่น
5. รักษาเวลาเล่นไว้ในสถานที่จัดเก็บในท้องถิ่น ปล่อยให้คีย์จัดเก็บเป็น "videoplayer-current-time"
6. ใช้เมธอด setCurrentime () เพื่อกู้คืนการทำซ้ำจากตำแหน่งที่เก็บรักษาไว้เมื่อรีสตาร์ทหน้า
7. เพิ่มไปยังโครงการของ Lodash. Throttle Biblilot และทำการต่ออายุเวลาต่ออายุในที่เก็บข้อมูลไม่เกินหนึ่งครั้งต่อวินาที

ภารกิจ 3 - รูปแบบของข้อเสนอแนะ

HTML มีการทำเครื่องหมายแบบฟอร์ม เขียนสคริปต์ที่จะจัดเก็บค่าฟิลด์ในที่เก็บข้อมูลท้องถิ่นเมื่อผู้ใช้พิมพ์บางสิ่ง

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

ทำงานนี้ให้เสร็จใน 03-feedback.html และ 03-feedback.js แบ่งออกเป็นไม่กี่สายย่อย:

1. ติดตามเหตุการณ์ input ในแบบฟอร์มและแต่ละครั้งจะบันทึกวัตถุด้วยฟิลด์ email และ message ในที่เก็บท้องถิ่นซึ่งเก็บค่าปัจจุบันของฟิลด์ฟอร์ม ให้ปุ่มจัดเก็บเป็นบรรทัด "feedback-form-state"
2. เมื่อดาวน์โหลดหน้าตรวจสอบสถานะของที่เก็บและหากมีข้อมูลที่เก็บไว้ให้กรอกข้อมูลในฟิลด์ของแบบฟอร์ม มิฉะนั้นฟิลด์ควรว่างเปล่า
3. ในระหว่างรูปแบบย่อยการขึ้นรูปและฟิลด์จะได้รับการทำความสะอาดรวมถึงเอาต์พุตคอนโซลด้วย email ฟิลด์ message และค่าปัจจุบัน
4. ตรวจสอบให้แน่ใจว่าที่เก็บข้อมูลได้รับการปรับปรุงไม่เกินหนึ่งครั้งทุก ๆ 500 มิลลิวินาที ในการทำเช่นนี้ให้เพิ่มโครงการและใช้ห้องสมุด Lodash. Throttle

---

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

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

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

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

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

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

ปรับใช้

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

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

เวอร์ชันโครงการของโครงการจะเป็นไปโดยอัตโนมัติและหยุดบนหน้า 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 หากนี่ไม่ใช่อัตโนมัติมาก

สถานะของ DePaza

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

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

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

พล็อตสด

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

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

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

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