10 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
bd7158d8c442eddfaeb5bd0f | Побудувати годинник 25 + 5 | 3 | 301373 | build-a-25--5-clock |
--description--
Мета: створити застосунок, функціонально схожий до цього: https://25--5-clock.freecodecamp.rocks.
Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.
Ви можете використовувати будь-яке поєднання 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
.
Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши Save
. Або ж ви можете скористатися посиланням CDN, щоб запустити тест в будь-якому середовищі, наприклад: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Як тільки ви закінчите, надішліть URL-адресу вашого робочого проєкту з усіма пройденими тестами.
--solutions--
// solution required