https://github.com/dm-zhuk/goit-advancedjs-hw-02

Promises: Task 1 - color switcher; Task 2 - countdown timer; Task 3 - promise generator
https://github.com/dm-zhuk/goit-advancedjs-hw-02

Last synced: about 6 hours ago
JSON representation

Promises: Task 1 - color switcher; Task 2 - countdown timer; Task 3 - promise generator

• Host: GitHub
• URL: https://github.com/dm-zhuk/goit-advancedjs-hw-02
• Owner: dm-zhuk
• Created: 2024-01-13T21:29:05.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-19T19:40:59.000Z (10 months ago)
• Last Synced: 2024-01-20T14:41:43.270Z (10 months ago)
• Language: JavaScript
• Homepage: https://dm-zhuk.github.io/goit-advancedjs-hw-02/
• Size: 1.98 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Завдання 1. Перемикач кольорів Виконуй це завдання у файлах

01-color-switcher.html і 01-color-switcher.js. Подивися демо-відео роботи

перемикача. HTML містить кнопки «Start» і «Stop».

Start

Stop

Напиши скрипт, який після натискання кнопки «Start», раз на секунду змінює колір

фону  на випадкове значення, використовуючи інлайн стиль. Натисканням на

кнопку «Stop» зміна кольору фону повинна зупинятися.

УВАГА Враховуй, що на кнопку «Start» можна натиснути нескінченну кількість

разів. Зроби так, щоб доки зміна теми запущена, кнопка «Start» була неактивною

(disabled).

Для генерування випадкового кольору використовуй функцію getRandomHexColor.

function getRandomHexColor() { return

`#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, 0)}`; }

Завдання 2. Таймер зворотного відліку Виконуй це завдання у файлах 02-timer.html

і 02-timer.js. Напиши скрипт таймера, який здійснює зворотний відлік до певної

дати. Такий таймер може використовуватися у блогах та інтернет-магазинах,

сторінках реєстрації подій, під час технічного обслуговування тощо. Подивися

демо-відео роботи таймера. Елементи інтерфейсу HTML містить готову розмітку

таймера, поля вибору кінцевої дати і кнопку, по кліку на яку, таймер повинен

запускатися. Додай мінімальне оформлення елементів інтерфейсу.

Start





00

Days





00

Hours





00

Minutes





00

Seconds





Бібліотека flatpickr Використовуй бібліотеку flatpickr для того, щоб дозволити

користувачеві кросбраузерно вибрати кінцеву дату і час в одному елементі

інтерфейсу. Для того щоб підключити CSS код бібліотеки в проект, необхідно

додати ще один імпорт, крім того, що описаний в документації.

// Описаний в документації import flatpickr from "flatpickr"; // Додатковий

імпорт стилів import "flatpickr/dist/flatpickr.min.css";

Бібліотека очікує, що її ініціалізують на елементі input[type="text"], тому ми

додали до HTML документу поле input#datetime-picker.

Другим аргументом функції flatpickr(selector, options) можна передати

необов'язковий об'єкт параметрів. Ми підготували для тебе об'єкт, який потрібен

для виконання завдання. Розберися, за що відповідає кожна властивість в

документації «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» стає активною. Кнопка «Start» повинна бути

неактивною доти, доки користувач не вибрав дату в майбутньому. Натисканням на

кнопку «Start» починається відлік часу до обраної дати з моменту натискання.

Відлік часу Натисканням на кнопку «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() і перед рендерингом інтефрейсу форматує значення.

Бібліотека повідомлень УВАГА Наступний функціонал не обов'язковий для здавання

завдання, але буде хорошою додатковою практикою.

Для відображення повідомлень користувачеві, замість window.alert(), використовуй

бібліотеку iziToast.

Для того щоб підключити CSS код бібліотеки в проект, необхідно додати ще один

імпорт, крім того, що описаний в документації.

// Описаний в документації import iziToast from "izitoast"; // Додатковий імпорт

стилів import "izitoast/dist/css/iziToast.min.css";

Завдання 3. Генератор промісів Виконуй це завдання у файлах 03-promises.html і

03-promises.js. Подивися демо-відео роботи генератора промісів. HTML містить

розмітку форми, в поля якої користувач буде вводити першу затримку в

мілісекундах, крок збільшення затримки для кожного промісу після першого і

кількість промісів, яку необхідно створити.

First delay (ms)

Delay step (ms)

Amount

Create promises

Напиши скрипт, який на момент сабміту форми викликає функцію

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(), використовуй

бібліотеку iziToast.

# Vanilla App Template

Цей проект було створено за допомогою Vite. Для знайомства та налаштування

додаткових можливостей [звернись до документації](https://vitejs.dev/).

## Створення репозиторію за шаблоном

Використовуй цей репозиторій організації GoIT як шаблон для створення

репозиторію свого проекту. Для цього натисни на кнопку `«Use this template»` і

обери опцію `«Create a new repository»`, як показано на зображенні.

![Creating repo from a template step 1](./assets/template-step-1.png)

На наступному етапі відкриється сторінка створення нового репозиторію. Заповни

поле його імені, переконайся, що репозиторій публічний, після чого натисни

кнопку `«Create repository from template»`.

![Creating repo from a template step 2](./assets/template-step-2.png)

Після того, як репозиторій буде створено, необхідно перейти в налаштування

створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано

на зображенні.

![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png)

Проскроливши сторінку до самого кінця, в секції `«Workflow permissions»` обери

опцію `«Read and write permissions»` і постав галочку в чекбоксі. Це необхідно

для автоматизації процесу деплою проекту.

![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png)

Тепер у тебе є особистий репозиторій проекту, зі структурою файлів та папок

репозиторію-шаблону. Далі працюй з ним, як з будь-яким іншим особистим

репозиторієм, клонуй його собі на комп'ютер, пиши код, роби коміти та відправляй

їх на GitHub.

## Підготовка до роботи

1. Переконайся, що на комп'ютері встановлено LTS-версію Node.js.

   [Скачай та встанови](https://nodejs.org/en/) її якщо необхідно.

2. Встанови базові залежності проекту в терміналі командою `npm install`.

3. Запусти режим розробки, виконавши в терміналі команду `npm run dev`.

4. Перейдіть у браузері за адресою

   [http://localhost:5173](http://localhost:5173). Ця сторінка буде автоматично

   перезавантажуватись після збереження змін у файли проекту.

## Файли і папки

- Файли розмітки компонентів сторінки повинні лежати в папці `src/partials` та

  імпортуватись до файлу `index.html`. Наприклад, файл з розміткою хедера

  `header.html` створюємо у папці `partials` та імпортуємо в `index.html`.

- Файли стилів повинні лежати в папці `src/css` та імпортуватись до HTML-файлів

  сторінок. Наприклад, для `index.html` файл стилів називається `index.css`.

- Зображення додавай до папки `src/img`. Збирач оптимізує їх, але тільки при

  деплої продакшн версії проекту. Все це відбувається у хмарі, щоб не

  навантажувати твій комп'ютер, тому що на слабких компʼютерах це може зайняти

  багато часу.

## Деплой

Продакшн версія проекту буде автоматично збиратися та деплоїтись на GitHub

Pages, у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад,

після прямого пуша або прийнятого пул-реквесту. Для цього необхідно у файлі

`package.json` змінити значення прапора `--base=//`, для команди `build`,

замінивши `` на назву свого репозиторію, та відправити зміни на GitHub.

```json

"build": "vite build --base=//",

```

Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) та

виставити роздачу продакшн версії файлів з папки `/root` гілки `gh-pages`, якщо

це не було зроблено автоматично.

![GitHub Pages settings](./assets/repo-settings.png)

### Статус деплою

Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.

- **Жовтий колір** - виконується збірка та деплой проекту.

- **Зелений колір** - деплой завершився успішно.

- **Червоний колір** - під час лінтингу, збірки чи деплою сталася помилка.

Більш детальну інформацію про статус можна переглянути натиснувши на іконку, і в

вікні, що випадає, перейти за посиланням `Details`.

![Deployment status](./assets/deploy-status.png)

### Жива сторінка

Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за

адресою, вказаною на вкладці `Settings` > `Pages` в налаштуваннях репозиторію.

Наприклад, ось посилання на живу версію для цього репозиторію

[https://goitacademy.github.io/vanilla-app-template/](https://goitacademy.github.io/vanilla-app-template/).

Якщо відкриється порожня сторінка, переконайся, що у вкладці `Console` немає

помилок пов'язаних з неправильними шляхами до CSS та JS файлів проекту

(**404**). Швидше за все у тебе неправильне значення прапора `--base` для

команди `build` у файлі `package.json`.

## Як це працює

![How it works](./assets/how-it-works.png)

1. Після кожного пуша у гілку `main` GitHub-репозиторію, запускається

   спеціальний скрипт (GitHub Action) із файлу `.github/workflows/deploy.yml`.

2. Усі файли репозиторію копіюються на сервер, де проект ініціалізується та

   проходить лінтинг та збірку перед деплоєм.

3. Якщо всі кроки пройшли успішно, зібрана продакшн версія файлів проекту

   відправляється у гілку `gh-pages`. В іншому випадку, у лозі виконання скрипта

   буде вказано в чому проблема.