82 lines
10 KiB
Markdown
82 lines
10 KiB
Markdown
---
|
||
id: bd7158d8c442eddfaeb5bd0f
|
||
title: Побудувати годинник 25 + 5
|
||
challengeType: 3
|
||
forumTopicId: 301373
|
||
dashedName: build-a-25--5-clock
|
||
---
|
||
|
||
# --description--
|
||
|
||
**Завдання:** Створити [CodePen.io](https://codepen.io) додаток, який функціонально схожий на:<https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||
|
||
Заповніть наведені нижче [історії користувачів](https://en.wikipedia.org/wiki/User_story) і пройдіть усі тести. Надайте йому свій особистий стиль.
|
||
|
||
Ви можете використовувати будь-яке поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux і jQuery для створення цього проєкту. Слід використовувати frontend framework (наприклад, React), тому що цей розділ присвячений саме їх вивченню. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо варіант використання інших фреймворк шаблонів для розробки інтерфейсу користувача таких, як Angular та Vue, проте наразі вони не підримуютьcя. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!
|
||
|
||
**Історія користувача #1:** Я можу побачити елемент з `id="break-label"`, який містить рядок (наприклад, "Break Length").
|
||
|
||
**Історія користувача #2:** Я можу побачити елемент з `id="session-label"`, який містить рядок (наприклад, "Session Length").
|
||
|
||
**Історія користувача #3:** Я бачу два клікабельні елементи із відповідними ID: `id="break-decrement"` та `id="session-decrement"`.
|
||
|
||
**Історія користувач #4:** Я можу побачити два клікабельні елементи із відповідними ID: `id="break-increment"` та `id="session-increment"`.
|
||
|
||
**Історія користувача #5:** Я можу побачити елемент з відповідним `id="break-length"`, який за замовчуванням (при завантаженні) показує значення 5.
|
||
|
||
**Історія користувача #6:** Я можу побачити елемент із відповідним `id="session-length"`, який за замовчуванням показує значення 25.
|
||
|
||
**Історія користувача #7:** Я можу побачити елемент з відповідним `id="timer-label"`, який містить рядок, який вказує, що сесія ініціалізована (наприклад, «Session»).
|
||
|
||
**Історія користувача #8:** Я можу побачити елемент із відповідним `id="time-left"`. ПРИМІТКА: при зупинці чи в процесі, значення в цьому полі завжди має зображатися в форматі `mm:ss` (тобто 25:00).
|
||
|
||
**Історія користувача #9:** Я можу побачити клікабельний елемент із відповідним `id="start_stop"`.
|
||
|
||
**Історія користувача #10:** Я можу побачити клікабельний елемент із відповідним `id="reset"`.
|
||
|
||
**Історія користувача #11:** Коли я натискаю на елемент з id `reset`, усі таймери повинні зупинитися, значення в `id="break-length"` повинне повернутися до `5`, а значення в `id="session-length"` - до 25, а елемент в `id="time-left"` повинен повернутися до стану за замовчуванням.
|
||
|
||
**Історія користувача #12:** Коли натискати на елемент з id `break-decrement`, значення у `id="break-length"` зменшується на значення 1, і тоді можна побачити оновлене значення.
|
||
|
||
**Історія користувача #13:** Коли натискати на елемент з id `break-increment`, значення у `id="break-length"` збільшується на значення 1, і тоді можна побачити оновлене значення.
|
||
|
||
**Історія користувача #14:** Коли натискати на елемент з id `session-decrement`, значення у `id="session-length"` зменшується на значення 1, і тоді можна побачити оновлене значення.
|
||
|
||
**Історія користувача #15:** Коли я натискаю на елемент з id `session-increment`, значення у `id="session-length"` збільшується на значення 1, і тоді можна побачити оновлене значення.
|
||
|
||
**Історія користувача #16:** Я не маю можливості встановити тривалість сеансу або перерви <= 0.
|
||
|
||
**Історія користувача #17:** Я не зможу встановити тривалість сеансу або перерви > 60.
|
||
|
||
**Історія користувача #18:** Коли я клацаю на елемент із `id="start_stop"`, таймер повинен запрацювати з поточного значення, що зображується в `id="session-length"`, навіть якщо значення зменшилось чи збільшилось від початкового значення 25.
|
||
|
||
**Історія користувача #19:** Якщо таймер запущений, елемент з id `time-left` повинен показувати час, що залишився у форматі `mm:ss` (зменшуючись на значення 1, і оновлюючи зображення кожні 1000 мс).
|
||
|
||
**Історія користувача #20** Якщо таймер запущений, і я клацаю на елемент з `id="start_stop"`, зворотний відлік повинен припинитися.
|
||
|
||
**Історія користувача #21:** Якщо таймер призупинено, і я клацаю на елемент з `id="start_stop"`, зворотний відлік повинен відновитися з моменту, на якому він був припинений.
|
||
|
||
**Історія користувача #22:** Коли зворотний відлік сеансу досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), і зворотний відлік починається знову, елемент з id `timer-label` повинен показувати рядок, що вказує на початок перерви.
|
||
|
||
**Історія користувача #23:** Коли сесія зворотного відліку перерви досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), повинна розпочатися нова сесія зворотного відліку часу перерви, яка відраховується від поточного зображуваного значення елемента `id="break-length"`.
|
||
|
||
**Історія користувача #24:** Коли зворотний відлік перерви досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), і розпочинається новий зворотний відлік, елемент з id `timer-label` повинен зображати рядок, що вказує на початок сеансу.
|
||
|
||
**Історія користувача #25:** Коли зворотний відлік перерви досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), повинен розпочатися зворотний відлік нової сесії, який відраховується від поточного зображуваного значення елемента `id="session-length"`.
|
||
|
||
**Історія користувача #26:** Коли зворотний відлік досягає нуля (ПРИМІТКА: таймер ПОВИНЕН досягти 00:00), повинен прозвучати сигнал, який вказує, що час вичерпано. Він повинен використовувати HTML5 `audio` тег і мати відповідний `id="beep"`.
|
||
|
||
**Історія користувача #27:** Аудіо елемент з `id="beep"` повинен тривати 1 секунду чи довше.
|
||
|
||
**Історія користувача #28:** Аудіо елемент з id `beep` повинен припинити відтворення і бути перемотаний до початку, при натисканні на елемент з id `reset`.
|
||
|
||
Ви можете створити проєкт<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>, скориставшись шаблоном CodePen</a> і натиснувши `Save`, щоб створити власне перо. Або ж ви можете скористатися посиланням CDN, щоб запустити тест в будь-якому середовищі, наприклад: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||
|
||
Як тільки ви закінчите, надішліть URL-адресу вашого робочого проєкту з усіма пройденими тестами.
|
||
|
||
# --solutions--
|
||
|
||
```js
|
||
// solution required
|
||
```
|