freeCodeCamp/curriculum/challenges/russian/03-front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock.russian.md

---
id: bd7158d8c442eddfaeb5bd0f
title: Build a Pomodoro Clock
isRequired: true
challengeType: 3
forumTopicId: 301373
localeTitle: Постройте часы Pomodoro
---

## Description
<section id='description'>
<strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/XpKrrW" target="_blank">https://codepen.io/freeCodeCamp/full/XpKrrW</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! <strong>User Story # 1:</strong> Я вижу элемент с <code>id=&quot;break-label&quot;</code> который содержит строку (например, &quot;Break Length&quot;). <strong>User Story # 2:</strong> Я вижу элемент с <code>id=&quot;session-label&quot;</code> который содержит строку (например, «Длина сеанса»). <strong>User Story # 3:</strong> Я вижу два интерактивных элемента с соответствующими идентификаторами: <code>id=&quot;break-decrement&quot;</code> и <code>id=&quot;session-decrement&quot;</code> . <strong>User Story # 4:</strong> Я вижу два интерактивных элемента с соответствующими идентификаторами: <code>id=&quot;break-increment&quot;</code> и <code>id=&quot;session-increment&quot;</code> . <strong>User Story # 5:</strong> Я вижу элемент с соответствующим <code>id=&quot;break-length&quot;</code> , который по умолчанию (при загрузке) отображает значение 5. <strong>User Story # 6:</strong> я могу видеть элемент с соответствующим <code>id=&quot;session-length&quot;</code> , который по умолчанию отображает значение 25. <strong>User Story # 7:</strong> я могу увидеть элемент с соответствующим <code>id=&quot;timer-label&quot;</code> , который содержит строку, указывающую, что сеанс инициализирован (например,« Session ») , <strong>User Story # 8:</strong> Я вижу элемент с соответствующим <code>id=&quot;time-left&quot;</code> . ПРИМЕЧАНИЕ. При приостановке или запуске значение в этом поле должно всегда отображаться в формате <code>mm:ss</code> (т.е. 25:00). <strong>User Story # 9:</strong> Я вижу кликабельный элемент с соответствующим <code>id=&quot;start_stop&quot;</code> . <strong>User Story # 10:</strong> Я вижу кликабельный элемент с соответствующим <code>id=&quot;reset&quot;</code> . <strong>User Story # 11:</strong> Ко
</section>

## Instructions
<section id='instructions'>

</section>

## Tests
<section id='tests'>

```yml
tests: []
```

</section>