goit js hw 09
1.0.0
Baca dalam bahasa lain: Ukraina, Inggris.
goit-js-hw-09 dibuat.GitHub Pages .Prettier . 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.
Selesaikan tugas ini di 01-color-switcher.html dan 01-color-switcher.js . Lihat demo-video sakelar.
HTML berisi tombol "Start" dan "Stop".
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button > Tulis skrip yang mengubah warna latar belakang <body> ke nilai acak menggunakan gaya inline setelah mengklik tombol start. Mengklik tombol "Stop" Ubah warna latar belakang harus berhenti.
️ Ingatlah bahwa Anda dapat mengklik beberapa kali tanpa akhir pada tombol Mulai. Pastikan perubahan dimulai, tombol start tidak aktif.
Gunakan getRandomHexColor untuk menghasilkan warna acak.
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} Selesaikan tugas ini dalam file 02-timer.html dan 02-timer.js . Tulis skrip pengatur waktu yang memeriksa hitungan ke tanggal tertentu. Pengatur waktu seperti itu dapat digunakan di blog dan toko online, halaman pendaftaran acara, pemeliharaan dan banyak lagi. Lihat Demo-Video dari Timer.
HTML berisi timer yang siap -siap, bidang pemilihan bidang dan tombol pada klik yang harus dimulai timer. Tambahkan antarmuka minimum.
< 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 >flatpickrGunakan pustaka FlatPickr untuk memungkinkan pengguna memilih tanggal dan waktu akhir dalam satu elemen antarmuka. Untuk menghubungkan kode perpustakaan CSS ke proyek, Anda perlu menambahkan impor lain, kecuali seperti yang dijelaskan dalam dokumentasi.
// Описаний в документації
import flatpickr from 'flatpickr' ;
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css' ; Perpustakaan mengharapkannya untuk diinisialisasi pada input[type="text"] , jadi kami menambahkan bidang input#datetime-picker ke dokumen HTML.
< input type =" text " id =" datetime-picker " /> Argumen kedua flatpickr(selector, options) dapat mengirimkan objek parameter opsional. Kami telah mempersiapkan Anda suatu objek yang diperlukan untuk menyelesaikan tugas. Pahami apa yang dimiliki setiap properti dalam dokumentasi opsi yang bertanggung jawab, dan gunakan dalam kode Anda.
const options = {
enableTime : true ,
time_24hr : true ,
defaultDate : new Date ( ) ,
minuteIncrement : 1 ,
onClose ( selectedDates ) {
console . log ( selectedDates [ 0 ] ) ;
} ,
} ; Metode objek parameter onClose() dipanggil setiap kali antarmuka yang menciptakan flatpickr ditutup. Perlu untuk memproses tanggal yang dipilih oleh pengguna. Parameter selectedDates adalah array tanggal yang dipilih, jadi kami mengambil elemen pertama.
window.alert() dengan teks "Please choose a date in the future" . Mengklik pada skrip "Mulai" harus dihitung sekali satu detik, berapa banyak waktu yang tersisa ke tanggal yang ditentukan, dan perbarui antarmuka timer, menunjukkan empat digit: hari, jam, menit dan kedua dalam xx:xx:xx:xx .
00:00:00:00 .Kami tidak akan menyulitkan. Jika timer berjalan untuk memilih tanggal baru dan restart, Anda perlu memulai kembali halaman.
Untuk menghitung nilai, gunakan convertMs fungsi jadi, di mana ms adalah perbedaan antara tanggal akhir dan saat ini dalam milidetik.
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} Fitur convertMs() mengembalikan objek dengan waktu yang dihitung yang tersisa ke tanggal akhir. Harap dicatat bahwa itu tidak memformat hasilnya. Yaitu, jika ada 4 menit atau komponen waktu lainnya, maka fungsi akan mengembalikan 4 , bukan 04 . Di antarmuka timer, Anda harus menambahkan 0 jika ada kurang dari dua karakter. Tulis fitur addLeadingZero(value) yang menggunakan metode padStart() dan format nilai sebelum rendering.
️ Fungsionalitas berikut tidak diperlukan untuk tugas tersebut, tetapi akan menjadi praktik tambahan yang baik.
DD menampilkan pesan ke pengguna alih -alih window.alert() , gunakan pustaka notiflix.
Selesaikan tugas ini di 03-promises.html dan 03-promises.js . Lihat Demo-Video dari Generator Kerja.
HTML berisi tanda formulir di mana pengguna akan memasukkan penundaan pertama dalam milidetik, langkah dalam meningkatkan penundaan untuk setiap pemotong setelah yang pertama dan jumlah tindakan yang akan dibuat.
< 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 > Tulis skrip yang pada saat bentuk bentuk menyebabkan fungsi createPromise(position, delay) sebanyak yang dimasukkan dalam bidang amount . Selama setiap panggilan, lewati nomor position yang dibuat dan penundaan, mengingat penundaan pertama ( delay ) yang dimasukkan oleh pengguna dan langkah ( step ).
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} Komplemen kode fungsi createPromise sehingga mengembalikan satu potongan atau penolakan setelah delay . Nilai sisi harus menjadi objek di mana position dan delay properti dengan nilai dari parameter yang sama. Gunakan kode fungsi asli untuk memilih apa yang perlu Anda lakukan dengan hukuman - lakukan atau tolak.
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` ) ;
} ) ;
️ Fungsionalitas berikut tidak diperlukan untuk tugas tersebut, tetapi akan menjadi praktik tambahan yang baik.
Untuk menampilkan pesan kepada pengguna, alih -alih console.log() , gunakan pustaka notiflix.
Proyek ini adalah Sozdan di Parcel. Untuk penandaan dan penyesuaian pelabuhan paparan dipilih untuk dokumentasi.
parcel-project-template Nash Nashmi.npm install .npm start .src/sass dan diimpor dalam file file halaman. Misalnya, untuk index.html file gaya disebut index.scss .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. 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 penyebaran komuter ekstrem ditaklukkan oleh ikon ego yoditicator.
Informasi terperinci yang menyakitkan tentang status dapat direndam di ikon, dan di luar sakelar Windows pada Details .
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 .
main khusus (tindakan github) dari file .github/workflows/deploy.yml diluncurkan.gh-pages . Dalam kasus yang berlawanan, dalam skrip logika akan diberikan dalam masalah.
