Круговой таймер

Реализуйте таймер, который можно запустить на заданное количество минут с визуализацией в виде круговой диаграммы. Проект включает в себя установку времени в минутах, обратный отсчет с визуализацией в виде круговой диаграммы, звуковой сигнал по окончании. Продумайте структуру хранения данных и реализацию логики в коде JavaScript. Вся логика должна выполняться на клиенте без перезагрузки страницы. Скачать верстку для проекта.

Основные возможности проекта

Ввод количества минут в инпут.
Запуск таймера по нажатию кнопки.
Обратный отсчет минут и секунд.
Визуализация в виде круговой диаграммы (canvas).
Звуковой сигнал по окончании времени.

Главная страница

На странице должны быть размещены:

Инпут для ввода количества минут (число).
Кнопка "Запустить таймер".
Canvas для отображения круговой диаграммы.
Блок с отображением оставшегося времени (минуты:секунды).

Круговая диаграмма

Таймер визуализируется в виде круговой диаграммы на canvas:

Весь круг - это 100% времени.
Закрашенная часть круга уменьшается по мере уменьшения времени.
В центре круга отображается оставшееся время (минуты:секунды).

Работа таймера

При запуске таймера начинается обратный отсчет от введенного количества минут до нуля:

Каждую секунду обновляется отображение времени.
Каждую секунду перерисовывается круговая диаграмма.
Когда время заканчивается, таймер останавливается и звучит звуковой сигнал.

Управление таймером

Должны быть доступны следующие функции:

Пауза - приостановка таймера.
Возобновление - продолжение таймера с места остановки.
Сброс - остановка таймера и сброс к начальному значению.

Звуковой сигнал

По окончании времени таймер воспроизводит звуковой сигнал.

Дополнительные возможности

Настройка цвета круговой диаграммы.
Выбор звукового сигнала.