goit js hw 09
1.0.0
اقرأ بلغات أخرى: الأوكرانية ، الإنجليزية.
goit-js-hw-09 .GitHub Pages .Prettier . في مجلد SRC ، ستجد ملفات بدء تشغيل علامات وأنماط وجاهزة ونصوص متصلة لكل مهمة. انسخها في المشروع عن طريق استبدال مجلد src بالكامل في Parcel-Project-Template. للقيام بذلك ، قم بتنزيل كل هذا المستودع كأرشيف أو استخدم خدمة Downgit لتنزيل مجلد منفصل من المستودع.
أكمل هذه المهمة في 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" . يجب حساب النقر على البرنامج النصي "START" مرة واحدة في الثانية ، ومقدار الوقت المتبقي للتاريخ المحدد ، وتحديث واجهة المؤقت ، وتوضح أربعة أرقام: أيام ، وساعات ، والثانية في 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.
كان هذا المشروع سوزدان في الطرود. للحصول على علامة وتعديل مرسى التعرض ليتم اختياره للوثائق.
parcel-project-template ناش ناشمي.npm install Team.npm start .src/sass Papquet ويتم استيرادها في ملفات ملفات الصفحات. على سبيل المثال ، بالنسبة إلى index.html ، يسمى ملف النمط index.scss .src/images . يحسنهم الشوروسي ، ولكن فقط مع استشادة إصدار المشروع من المشروع. كل شيء يذهب إلى مرأى من جهاز الكمبيوتر الخاص بك ، لذلك يمكن أن يكون الكثير من الوقت على السيارات الضعيفة. لضبط مشروع DePaza ، من الضروري رسم الكثير من عمليات القطع الإضافية على إعداد مستودعك. تعال إلى علامة التبويب Settings " وفي المقاطع الفرعية Actions ، حدد العنصر General .
حرك المؤامرة إلى المنشور ، حيث يتم أخذ أوباسيا في المسار على أثر الصورة ومن أجل Save . بدون هذه الأعلاف في المجارف ، سيكون هناك نفاثة لأتمتة عملية نشرها.
سيكون إصدار المشروع من المشروع تلقائيًا ويتوقف على صفحات GitHub ، في gh-pages Wet ، يتم تحديث وقت COGD main . على سبيل المثال ، بوشا مستقيمة أو بوشا محاكمة على حمام السباحة أو بوشا مستقيمة. لهذا ، تحتاج إلى تقديم homepage package.json File و build Script ، واضغطت على 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-Repository ( Settings > Pages ) وسوف يستخلص إنتاج الملف من المجلد /root gh-pages ، إذا لم يكن هذا كثيرًا.
يتم غزو حالة نشر مقطع متطرف بواسطة أيقونة الأنا من yoditicator.
يمكن غارقة المعلومات التفصيلية المؤلمة حول الحالة في الرمز ، وفي تجاوز تبديل Windows على Details .
بسبب الوقت ، بضع أسطول ، أعيش المؤامرة ، يمكنك أن ينضج على العنوان المشار إليه في homepage . على سبيل المثال ، أعيش ماند لهذا المستودع https://goitacademy.github.io/parcel-project-template.
إذا تم فتح مؤامرة صحراوية ، لقتل علامة تبويب Console في مشهد حزم CSS و JS Project ( 404 ). Scork All in Taby المعنى غير المنتظم homepage أو build البرنامج النصي في ملف package.json .
main نصي خاص (إجراء GitHub) من ملف .github/workflows/deploy.yml .gh-pages . في الحالة المعاكسة ، سيتم إعطاء في البرنامج النصي المنطقي في المشكلة.
