Skip to content
This repository has been archived by the owner on Aug 18, 2024. It is now read-only.

Commit

Permalink
Update README v2.0.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@lordponchik
lordponchik authored Aug 18, 2024
1 parent a74a663 commit 13734aa
Showing 1 changed file with 303 additions and 11 deletions.
314 changes: 303 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
# Homework / Домашнее задание :clipboard:
<h1 id="home">Homework :clipboard:</h1>

## goit-js-hw-09
:us:
<details>
<summary>English</summary>



* 🇺🇸 [English](#en)
* 🇺🇦 [Ukrainian](#uk)
* 🇷🇺 [Russian](#ru)

---

<h3 id="en">📚 EN 📚</h3>

# Acceptance criteria

- `goit-js-hw-09` repository created.
Expand Down Expand Up @@ -215,11 +222,297 @@ createPromise(2, 1500)
> ⚠️ The following features are optional, but they will be good for additional practice.
Use the [notiflix](https://github.com/notiflix/Notiflix#readme) library to display notifications to the user instead of `console.log()`.
</details>
:ukraine:
<details>
<summary>Russian</summary>


---
---

<h3 id="uk">📚 UK 📚 <a href="#home">⬆ Home ⬆</a></h3>

# Критерії прийому

- Створено репозиторій `goit-js-hw-09`.
- При здачі домашньої роботи є два посилання для кожного проекту: вихідні
файли та робочу сторінку на `GitHub Pages`.
- При відвідуванні живої сторінки завдання, в консолі немає помилок та попереджень.
- Проект зібраний за допомогою
[parcel-project-template](https://github.com/goitacademy/parcel-project-template).
- Код відформатовано `Prettier`.

## Стартові файли

[Скачай стартові файли](https://downgit.github.io/#/home?url=https://github.com/goitacademy/javascript-homework/tree/main/v2/09/src)
з готовою розміткою, стилями та підключеними файлами скриптів для кожного
завдання. Скопіюй їх собі в проект, повністю замінивши папку `src` у
[parcel-project-template](https://github.com/goitacademy/parcel-project-template).

## Завдання 1 - перемикач кольорів

Виконуй це завдання у файлах `01-color-switcher.html` та `01-color-switcher.js`.
Подивися демо відео роботи перемикача.

https://user-images.githubusercontent.com/17479434/127716753-fabd276f-6a7d-411b-bfa2-01c818f4ea66.mp4

<!-- Подивися
[демо відео](https://user-images.githubusercontent.com/17479434/127716753-fabd276f-6a7d-411b-bfa2-01c818f4ea66.mp4)
роботи перемикача. -->

У HTML є кнопки «Start» та «Stop».

```html
<button type="button" data-start>Start</button>
<button type="button" data-stop>Stop</button>
```

Напиши скрипт, який після натискання кнопки «Start», раз на секунду змінює колір
фону `<body>` на випадкове значення, використовуючи інлайн стиль. При натисканні на
кнопку «Stop», зміна кольору фона має зупинятися.

> ⚠️ Врахуй, на кнопку «Start» можна натиснути нескінченну кількість разів. Зроби
> так, щоб поки зміна теми запущена, кнопка «Start» була не активна
> (disabled).
Для генерації випадкового кольору використовуй функцію `getRandomHexColor`.

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

## Завдання 2 - таймер зворотного відліку

Виконуй це завдання у файлах `02-timer.html` та `02-timer.js`. Напиши скрипт
таймера, який веде зворотний відлік до дати. Такий таймер може
використовуватися в блогах та інтернет-магазинах, сторінках реєстрації подій,
час технічного обслуговування тощо. Подивися демо відео роботи таймера.

https://user-images.githubusercontent.com/17479434/127672390-2a51efe1-06fb-41dd-86dd-8542393d3043.mp4

<!-- Подивися
[демо відео](https://user-images.githubusercontent.com/17479434/127672390-2a51efe1-06fb-41dd-86dd-8542393d3043.mp4)
роботи таймера. -->

### Елементи інтефрейсу

У HTML є готова розмітка таймера, поля вибору кінцевої дати та кнопки, при
клік по якій таймер повинен запускатися. Додай мінімальне оформлення
елементів інтерфейсу.

```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](https://flatpickr.js.org/) для того щоб
дозволити користувачеві кроссбраузерно вибрати кінцеву дату та час в одному
елемент інтерфейсу. Щоб підключити CSS код бібліотеки до проекту,
необхідно додати ще один імпорт, крім того, що описаний в документації.

```js
// Описано у документації
import flatpickr from 'flatpickr';
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css';
```

Бібліотека очікує, що її ініціалізують на елементі `input[type="text"]`,
тому ми додали в HTML документ поле `input#datetime-picker`.

```html
<input type="text" id="datetime-picker" />
```

Другим аргументом функції `flatpickr(selector, options)` можна передати
необов'язковий об'єкт параметрів. Ми підготували для тебе об'єкт, який потрібен
для виконання завдання. Розберись за що відповідає кожна властивість у
[документації «Options»](https://flatpickr.js.org/options/) та використовуй його в
своєму коді.

```js
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` - різниця
між кінцевою та поточною датою в мілісекундах.

```js
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()` використовуй
бібліотеку [notiflix](https://github.com/notiflix/Notiflix#readme).

## Завдання 3 - генератор промісів

Виконуй це завдання у файлах `03-promises.html` та `03-promises.js`. Подивися
демо відео роботи генератора промісів.

https://user-images.githubusercontent.com/17479434/127932183-42232f26-4db2-4614-86bc-6bec54b1d6a4.mp4

<!-- Подивися
[демо відео](https://user-images.githubusercontent.com/17479434/127932183-42232f26-4db2-4614-86bc-6bec54b1d6a4.mp4)
роботи генератора промісів. -->

У HTML є розмітка форми, у поля якої користувач вводитиме першу
затримку в мілісекундах, крок збільшення затримки для кожного промісу після
першого та кількість промісів яку необхідно створити.

```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`).

```js
function createPromise(position, delay) {
const shouldResolve = Math.random() > 0.3;
if (shouldResolve) {
// Fulfill
} else {
// Reject
}
}
```

Доповни код функції `createPromise` так, щоб вона повертала **один проміс**,
який виконується або відхиляється через `delay` часу. Значення промісу
повинен бути об'єкт, в якому будуть властивості `position` та `delay` зі значеннями
однойменних параметрів. Використовуйте початковий код функції для вибору того, що
потрібно зробити з промісом – виконати або відхилити.

```js
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](https://github.com/notiflix/Notiflix#readme).

---
---

<h3 id="ru">📚 RU 📚 <a href="#home">⬆ Home ⬆</a></h3>

# Критерии приема

- Создан репозиторий `goit-js-hw-09`.
Expand Down Expand Up @@ -499,4 +792,3 @@ createPromise(2, 1500)
Для отображения уведомлений пользователю вместо `console.log()` используй
библиотеку [notiflix](https://github.com/notiflix/Notiflix#readme).
</details>

0 comments on commit 13734aa

Please sign in to comment.