Виконуй це завдання у файлах 01-timer.html і 01-timer.js. Напиши скрипт
таймера, який здійснює зворотний відлік до певної дати. Такий таймер може
використовуватися у блогах, інтернет-магазинах, сторінках реєстрації подій, під
час технічного обслуговування тощо.
Елементи інтерфейсу
Додай в HTML файл розмітку таймера, поля вибору кінцевої дати і кнопку, при кліку на яку таймер повинен запускатися. Додай оформлення елементів інтерфейсу згідно з макетом.
Бібліотека flatpickr
Використовуй бібліотеку flatpickr для того, щоб дозволити користувачеві
кросбраузерно вибрати кінцеву дату і час в одному елементі інтерфейсу. Для того
щоб підключити CSS код бібліотеки в проєкт, необхідно додати ще один імпорт,
крім того, що описаний в документації.
Бібліотека очікує, що її ініціалізують на елементі input[type="text"], тому ми
додали до HTML документа поле input#datetime-picker.
Другим аргументом функції flatpickr(selector, options) можна передати
необов'язковий об'єкт параметрів. Розберися, за що відповідає кожна властивість
у документації «Options» і використовуй його у своєму коді.
Вибір дати
Метод onClose() з об'єкта параметрів викликається щоразу під час закриття
елемента інтерфейсу, який створює flatpickr. Саме в ньому варто обробляти
дату, обрану користувачем. Параметр selectedDates — це масив обраних дат, тому
ми беремо перший елемент selectedDates[0].
Тобі ця обрана дата буде потрібна в коді і поза межами цього методу onClose().
Тому оголоси поза межами методу let змінну, наприклад, userSelectedDate, і
після валідації її в методі onClose() на минуле/майбутнє запиши обрану дату в
цю let змінну.
- Якщо користувач вибрав дату в минулому, покажи `window.alert()` з текстом `Please choose a date in the future` і зроби кнопку «Start» не активною.
- Якщо користувач вибрав валідну дату (в майбутньому), кнопка «Start» стає активною.
- Кнопка «Start» повинна бути неактивною доти, доки користувач не вибрав дату в майбутньому. Зверни увагу, що при обранні валідної дати, не запуску таймера і обранні потім невалідної дати, кнопка після розблокування має знову стати неактивною.
- Натисканням на кнопку «Start» починається зворотний відлік часу до обраної дати з моменту натискання.
Відлік часу
Натисканням на кнопку «Start» скрипт повинен обчислювати раз на секунду, скільки
часу залишилось до вказаної дати, і оновлювати інтерфейс таймера, показуючи
чотири цифри: дні, години, хвилини і секунди у форматі xx:xx:xx:xx.
- Кількість днів може складатися з більше, ніж двох цифр.
- Таймер повинен зупинятися, коли дійшов до кінцевої дати, тобто залишок часу дорівнює нулю `00:00:00:00`.
НЕ БУДЕМО УСКЛАДНЮВАТИ Якщо таймер запущений, для того щоб вибрати нову дату і перезапустити його — необхідно перезавантажити сторінку.
Для підрахунку значень використовуй готову функцію convertMs, де ms — різниця між кінцевою і поточною датою в мілісекундах.
Форматування часу
Функція convertMs() повертає об'єкт з розрахованим часом, що залишився до
кінцевої дати. Зверни увагу, що вона не форматує результат. Тобто якщо
залишилося 4 хвилини або будь-якої іншої складової часу, то функція поверне 4,
а не 04. В інтерфейсі таймера необхідно додавати 0, якщо в числі менше двох
символів. Напиши функцію, наприклад addLeadingZero(value), яка використовує
метод рядка [padStart()] і перед відмальовуванням інтерфейсу форматує
значення.
Бібліотека повідомлень
Для відображення повідомлень користувачеві, замість window.alert(),
використовуй бібліотеку iziToast.
Виконуй це завдання у файлах 02-snackbar.html і 02-snackbar.js. Подивися
демовідео роботи генератора промісів.
Додай в HTML файл розмітку форми. Форма складається з поля вводу для введення
значення затримки в мілісекундах, двох радіокнопок, які визначають те, як
виконається проміс, і кнопки з типом submit, при кліку на яку має створюватися
проміс.
Напиши скрипт, який після сабміту форми створює проміс. В середині колбека цього
промісу через вказану користувачем кількість мілісекунд проміс має виконуватися
(при fulfilled) або відхилятися (при rejected), залежно від обраної опції в
радіокнопках. Значенням промісу, яке передається як аргумент у методи
resolve/reject, має бути значення затримки в мілісекундах.
Створений проміс треба опрацювати у відповідних для вдалого/невдалого виконання методах.
Якщо проміс виконується вдало, виводь у консоль наступний рядок, де delay — це
значення затримки виклику промісу в мілісекундах.
✅ Fulfilled promise in ${delay}ms
Якщо проміс буде відхилено, то виводь у консоль наступний рядок, де delay — це значення затримки промісу в мілісекундах.
❌ Rejected promise in ${delay}ms
Бібліотека повідомлень
Для відображення повідомлень, замість console.log(), використовуй бібліотеку
iziToast. Для того щоб підключити CSS код бібліотеки в проєкт, необхідно
додати ще один імпорт, крім того, що описаний у документації.