Постройте часы Pomodoro
Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/XpKrrW . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент с id="break-label" который содержит строку (например, "Break Length"). User Story # 2: Я вижу элемент с id="session-label" который содержит строку (например, «Длина сеанса»). User Story # 3: Я вижу два интерактивных элемента с соответствующими идентификаторами: id="break-decrement" и id="session-decrement" . User Story # 4: Я вижу два интерактивных элемента с соответствующими идентификаторами: id="break-increment" и id="session-increment" . User Story # 5: Я вижу элемент с соответствующим id="break-length" , который по умолчанию (при загрузке) отображает значение 5. User Story # 6: я могу видеть элемент с соответствующим id="session-length" , который по умолчанию отображает значение 25. User Story # 7: я могу увидеть элемент с соответствующим id="timer-label" , который содержит строку, указывающую, что сеанс инициализирован (например,« Session ») , User Story # 8: Я вижу элемент с соответствующим id="time-left" . ПРИМЕЧАНИЕ. При приостановке или запуске значение в этом поле должно всегда отображаться в формате mm:ss (т.е. 25:00). User Story # 9: Я вижу кликабельный элемент с соответствующим id="start_stop" . User Story # 10: Я вижу кликабельный элемент с соответствующим id="reset" . User Story # 11: Когда я нажимаю элемент с идентификатором reset , любой рабочий таймер должен быть остановлен, значение в id="break-length" должно возвращаться к 5 , значение в id="session-length" должно возвращаться до 25, а элемент с id="time-left" должен сбрасываться в состояние по умолчанию. User Story # 12: Когда я нажимаю элемент с идентификатором break-decrement , значение в id="break-length" уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 13: Когда я нажимаю на элемент с идентификатором break-increment , значение в id="break-length" увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 14: Когда я нажимаю элемент с идентификатором сокращения session-decrement , значение в id="session-length" уменьшается на значение 1, и я могу видеть обновленное значение. User Story # 15: Когда я нажимаю элемент с идентификатором session-increment , значение в id="session-length" увеличивается на значение 1, и я могу видеть обновленное значение. User Story # 16: Я не должен был устанавливать длину сеанса или прерывания до <= 0. User Story # 17: Я не должен был устанавливать сессию или длину прерывания до 60. Пользовательская история № 18: Когда я сначала нажмите элемент с id="start_stop" , таймер должен начать работать со значения, отображаемого в настоящее время в id="session-length" , даже если значение было увеличено или уменьшено с первоначального значения 25. User Story # 19 : Если таймер запущен, элемент с id time-left должен отображать оставшееся время в формате mm:ss (декрементирование на значение 1 и обновление дисплея каждые 1000 мс). User Story # 20: Если таймер запущен, и я нажимаю на элемент с id="start_stop" , обратный отсчет должен приостанавливаться. User Story # 21: Если таймер приостановлен, и я нажимаю на элемент с id="start_stop" , обратный отсчет должен возобновиться с точки, в которой он был приостановлен. User Story # 22: Когда обратный отсчет сеанса достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором timer-label должен отображать строку, указывающую, что начался перерыв. User Story # 23: Когда обратный отсчет сеанса достигнет нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН доходить до 00:00), начинается новый обратный отсчет, отсчитывающий от значения, отображаемого в настоящее время в элементе id="break-length" . User Story # 24: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), и начинается новый обратный отсчет, элемент с идентификатором timer-label должен отображать строку, указывающую, что сеанс начался. User Story # 25: Когда обратный отсчет доходит до нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен начинаться отсчет нового сеанса, отсчитывающий от значения, отображаемого в настоящее время в элементе id="session-length" . User Story # 26: Когда обратный отсчет достигает нуля (ПРИМЕЧАНИЕ: таймер ДОЛЖЕН достигать 00:00), должен звучать звук, указывающий, что время вверх. Это следует использовать в HTML5 audio тегов и имеет соответствующий id="beep" . User Story # 27: Звуковой элемент с id="beep" должен быть 1 секунду или дольше. User Story # 28: Звуковой элемент с идентификатором beep должен прекратить воспроизведение и перематываться до начала, когда щелкнут элемент с идентификатором reset . Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.