Представляет собой пользовательский компонент таймера с возможностью его запуска, остановки и сброса
В приложении реализован следующий функционал:
- с помощью JavaScript и WebComponents API был создан кастомный компонент таймера
<timer-view>
, логика инкапсулированна в соответствующем классе элемента - элемент отображения времени таймера был имплементирован при помощи манипуляций с ShadowDOM, компоненты из LightDOM внутри него были реализованы при помощи слотов
- значения времени для таймера задаётся в атрибутах компонента
<timer-view>
: либо с помощью"seconds"
(указывать время в мс), либо"to-time"
(указывать до скольки должен отработать таймер в ЧЧ:ММ:СС, например до 16:25:32) - при изменении вышеперечисленных атрибутов таймер останавливается и сбрасывает время отсчёта до актуального значения
- созданы кастомные события таймера:
- события
starttimer
,pausetimer
иresettimer
генерируются при нажатии на соответсвующие кнопки - событие
endtimer
генерируется при истечении времени таймера
- события
- Адаптивная вёрсткая
- Использование препроцессора Sass/SCSS
- Использование методологии БЭМ
- JavaScript
- WebComponents API
- ShadowDOM
- CustomEvents
- Клонируйте данный репозиторий локально на своё устройство
- Запустите приложение на локальном сервере (например, с помощью Live Server)