goit js hw 09
1.0.0
อ่านในภาษาอื่น ๆ : ยูเครน, อังกฤษ
goit-js-hw-09 ถูกสร้างขึ้นGitHub PagesPrettier ในโฟลเดอร์ SRC คุณจะพบไฟล์เริ่มต้นที่มีเครื่องหมายพร้อมทำเครื่องหมายสไตล์และสคริปต์ที่เชื่อมต่อสำหรับแต่ละงาน คัดลอกลงในโครงการโดยแทนที่โฟลเดอร์ src อย่างสมบูรณ์ใน Parcel-Project-Template ในการทำเช่นนี้ให้ดาวน์โหลดที่เก็บทั้งหมดนี้เป็นเก็บถาวรหรือใช้บริการ DOWGIT เพื่อดาวน์โหลดโฟลเดอร์แยกต่างหากจากที่เก็บ
ทำงานนี้ให้เสร็จใน 01-color-switcher.html และ 01-color-switcher.js ดูการสาธิตวิดีโอของสวิตช์
HTML มีปุ่ม "เริ่ม" และ "หยุด"
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button > เขียนสคริปต์ที่เปลี่ยนสีของพื้นหลัง <body> เป็นค่าสุ่มโดยใช้สไตล์อินไลน์หลังจากคลิกปุ่มเริ่ม การคลิกที่ปุ่ม "หยุด" เปลี่ยนสีของพื้นหลังควรหยุด
โปรดทราบว่าคุณสามารถคลิกจำนวนครั้งที่ไม่มีที่สิ้นสุดบนปุ่มเริ่มต้น ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงเริ่มต้นขึ้นปุ่มเริ่มไม่ทำงาน
ใช้ getRandomHexColor เพื่อสร้างสีแบบสุ่ม
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} ทำงานนี้ให้เสร็จในไฟล์ 02-timer.html และ 02-timer.js เขียนสคริปต์ตัวจับเวลาที่ตรวจสอบจำนวนลงในวันที่หนึ่ง ตัวจับเวลาดังกล่าวสามารถใช้ในบล็อกและร้านค้าออนไลน์หน้าลงทะเบียนกิจกรรมการบำรุงรักษาและอื่น ๆ ดูการสาธิตวิดีโอของตัวจับเวลา
HTML มีตัวจับเวลาแบบพร้อมทำฟิลด์การเลือกสนามและปุ่มเมื่อคลิกที่ตัวจับเวลาควรเริ่มต้น เพิ่มอินเทอร์เฟซขั้นต่ำ
< input type =" text " id =" datetime-picker " />
< button type =" button " data-start > Start </ button >
< div class =" timer " >
< div class =" field " >
< span class =" value " data-days > 00 </ span >
< span class =" label " > Days </ span >
</ div >
< div class =" field " >
< span class =" value " data-hours > 00 </ span >
< span class =" label " > Hours </ span >
</ div >
< div class =" field " >
< span class =" value " data-minutes > 00 </ span >
< span class =" label " > Minutes </ span >
</ div >
< div class =" field " >
< span class =" value " data-seconds > 00 </ span >
< span class =" label " > Seconds </ span >
</ div >
</ div >flatpickrใช้ไลบรารี FlatPickR เพื่อให้ผู้ใช้เลือกวันที่สิ้นสุดและเวลาในองค์ประกอบอินเตอร์เฟสเดียว ในการเชื่อมต่อรหัสไลบรารี CSS เข้ากับโครงการคุณต้องเพิ่มการนำเข้าอื่นยกเว้นตามที่อธิบายไว้ในเอกสารประกอบ
// Описаний в документації
import flatpickr from 'flatpickr' ;
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css' ; ไลบรารีคาดว่าจะเริ่มต้นใน input[type="text"] ดังนั้นเราจึงเพิ่มฟิลด์ input#datetime-picker ลงในเอกสาร HTML
< input type =" text " id =" datetime-picker " /> อาร์กิวเมนต์ที่สองของ flatpickr(selector, options) สามารถส่งวัตถุพารามิเตอร์เสริม เราได้เตรียมวัตถุที่จำเป็นในการทำงานให้เสร็จ ทำความเข้าใจกับสิ่งที่ทุกคุณสมบัติในเอกสารตัวเลือกมีความรับผิดชอบและใช้ในรหัสของคุณ
const options = {
enableTime : true ,
time_24hr : true ,
defaultDate : new Date ( ) ,
minuteIncrement : 1 ,
onClose ( selectedDates ) {
console . log ( selectedDates [ 0 ] ) ;
} ,
} ; วิธีการ onClose() ของวัตถุพารามิเตอร์เรียกว่าทุกครั้งที่อินเทอร์เฟซที่สร้าง flatpickr ถูกปิด จำเป็นต้องประมวลผลวันที่ที่ผู้ใช้เลือก พารามิเตอร์ selectedDates เป็นอาร์เรย์ของวันที่ที่เลือกดังนั้นเราจึงใช้องค์ประกอบแรก
window.alert() พร้อมข้อความ "Please choose a date in the future" การคลิกที่สคริปต์ "เริ่มต้น" ควรคำนวณหนึ่งครั้งวินาทีเวลาที่เหลืออยู่ในวันที่ที่ระบุและอัปเดตอินเทอร์เฟซตัวจับเวลาแสดงตัวเลขสี่หลัก: วันชั่วโมงและวินาทีใน xx:xx:xx:xx
00:00:00:00เราจะไม่ซับซ้อน หากตัวจับเวลากำลังทำงานเพื่อเลือกวันที่ใหม่และรีสตาร์ทคุณจะต้องรีสตาร์ทหน้า
ในการคำนวณค่าให้ใช้ฟังก์ชั่นที่เสร็จสิ้น convertMs โดยที่ ms คือความแตกต่างระหว่างวันสุดท้ายและวันที่ปัจจุบันเป็นมิลลิวินาที
function convertMs ( ms ) {
// Number of milliseconds per unit of time
const second = 1000 ;
const minute = second * 60 ;
const hour = minute * 60 ;
const day = hour * 24 ;
// Remaining days
const days = Math . floor ( ms / day ) ;
// Remaining hours
const hours = Math . floor ( ( ms % day ) / hour ) ;
// Remaining minutes
const minutes = Math . floor ( ( ( ms % day ) % hour ) / minute ) ;
// Remaining seconds
const seconds = Math . floor ( ( ( ( ms % day ) % hour ) % minute ) / second ) ;
return { days , hours , minutes , seconds } ;
}
console . log ( convertMs ( 2000 ) ) ; // {days: 0, hours: 0, minutes: 0, seconds: 2}
console . log ( convertMs ( 140000 ) ) ; // {days: 0, hours: 0, minutes: 2, seconds: 20}
console . log ( convertMs ( 24140000 ) ) ; // {days: 0, hours: 6 minutes: 42, seconds: 20} คุณลักษณะ convertMs() ส่งคืนวัตถุด้วยเวลาที่คำนวณได้ที่เหลืออยู่ในวันสุดท้าย โปรดทราบว่ามันไม่ได้จัดรูปแบบผลลัพธ์ นั่นคือถ้ามี 4 นาทีหรือส่วนประกอบอื่น ๆ ของเวลาฟังก์ชั่นจะกลับ 4 ไม่ใช่ 04 ในอินเทอร์เฟซจับเวลาคุณต้องเพิ่ม 0 หากมีน้อยกว่าสองอักขระ เขียนคุณสมบัติ addLeadingZero(value) ที่ใช้วิธี padStart() และจัดรูปแบบค่าก่อนการแสดงผล
ฟังก์ชั่นต่อไปนี้ไม่จำเป็นสำหรับงาน แต่จะเป็นการฝึกฝนที่ดี
DD แสดงข้อความไปยังผู้ใช้แทน window.alert() ใช้ไลบรารี Notiflix
ทำงานนี้ให้เสร็จใน 03-promises.html และ 03-promises.js ดูการสาธิตวิดีโอของเครื่องกำเนิดงาน
HTML มีการทำเครื่องหมายของแบบฟอร์มที่ผู้ใช้จะป้อนความล่าช้าครั้งแรกในมิลลิวินาทีขั้นตอนในการเพิ่มความล่าช้าสำหรับแต่ละเครื่องตัดหลังจากครั้งแรกและจำนวนมาตรการที่จะสร้าง
< form class =" form " >
< label >
First delay (ms)
< input type =" number " name =" delay " required />
</ label >
< label >
Delay step (ms)
< input type =" number " name =" step " required />
</ label >
< label >
Amount
< input type =" number " name =" amount " required />
</ label >
< button type =" submit " > Create promises </ button >
</ form > เขียนสคริปต์ว่าในช่วงเวลาของรูปแบบของแบบฟอร์มทำให้ฟังก์ชั่น createPromise(position, delay) หลายครั้งตามที่ป้อนในฟิลด์ amount ในระหว่างการโทรแต่ละครั้งให้ผ่านหมายเลข position ที่สร้างขึ้นและความล่าช้าเนื่องจากการหน่วงเวลาครั้งแรก ( delay ) ที่ป้อนโดยผู้ใช้และขั้นตอน ( step )
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} เติมเต็มรหัสฟังก์ชั่น createPromise เพื่อให้ส่งคืน หนึ่งการตัด หรือปฏิเสธหลังจาก delay ค่าของด้านต้องเป็นวัตถุที่คุณสมบัติ position และ delay ที่มีค่าของพารามิเตอร์เดียวกัน ใช้รหัสฟังก์ชั่นดั้งเดิมเพื่อเลือกสิ่งที่คุณต้องทำกับการลงโทษ - ดำเนินการหรือปฏิเสธ
createPromise ( 2 , 1500 )
. then ( ( { position , delay } ) => {
console . log ( `✅ Fulfilled promise ${ position } in ${ delay } ms` ) ;
} )
. catch ( ( { position , delay } ) => {
console . log ( ` Rejected promise ${ position } in ${ delay } ms` ) ;
} ) ;
ฟังก์ชั่นต่อไปนี้ไม่จำเป็นสำหรับงาน แต่จะเป็นการฝึกฝนที่ดี
ในการแสดงข้อความถึงผู้ใช้แทน console.log() ให้ใช้ไลบรารี Notiflix
โครงการนี้เป็น Sozdan ที่พัสดุ สำหรับการทำเครื่องหมายและการปรับตัวของจุดยึดของการเปิดรับที่จะเลือกสำหรับเอกสาร
parcel-project-template แนชชี่npm installnpm startsrc/sass Papquet และนำเข้าในไฟล์ไฟล์ของหน้า ตัวอย่างเช่นสำหรับ index.html ไฟล์สไตล์เรียกว่า index.scsssrc/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 หากนี่ไม่ใช่อัตโนมัติมาก
สถานะของการปรับใช้การเดินทางที่รุนแรงนั้นถูกยึดครองโดยไอคอนของอัตตาของ Yoditicator
ข้อมูลรายละเอียดที่เจ็บปวดเกี่ยวกับสถานะสามารถแช่ในไอคอนและในสวิตช์ Windows ที่เกินใน Details
เนื่องจากเวลามีกองยานสองสามตัวฉันใช้ชีวิตพล็อตคุณสามารถเคี่ยวตามที่อยู่ที่ระบุไว้ใน homepage ตัวอย่างเช่นฉันใช้ชีวิตแมนสำหรับที่เก็บ https://goitacademy.github.io/parcel-project-template
หากมีการเปิดพล็อตของทะเลทรายเพื่อฆ่าแท็บ Console ของ NOR เพื่อสายตาของแพ็คที่จัดทำขึ้นของไฟล์โครงการ CSS และ JS ( 404 ) นกกระสาทั้งหมดในความหมายที่ผิดปกติของ homepage หรือ build สคริปต์ในไฟล์ package.json
main สคริปต์พิเศษ (GitHub) จากไฟล์. .github/workflows/deploy.ymlgh-pages VET ในกรณีตรงกันข้ามในสคริปต์ลอจิกจะได้รับในปัญหา
