Пользовательский таймер

Представляет собой пользовательский компонент таймера с возможностью его запуска, остановки и сброса

Описание

В приложении реализован следующий функционал:

• с помощью JavaScript и WebComponents API был создан кастомный компонент таймера <timer-view>, логика инкапсулированна в соответствующем классе элемента
• элемент отображения времени таймера был имплементирован при помощи манипуляций с ShadowDOM, компоненты из LightDOM внутри него были реализованы при помощи слотов
• значения времени для таймера задаётся в атрибутах компонента <timer-view>: либо с помощью "seconds" (указывать время в мс), либо "to-time"(указывать до скольки должен отработать таймер в ЧЧ:ММ:СС, например до 16:25:32)
• при изменении вышеперечисленных атрибутов таймер останавливается и сбрасывает время отсчёта до актуального значения
• созданы кастомные события таймера:
  • события starttimer, pausetimer и resettimer генерируются при нажатии на соответсвующие кнопки
  • событие endtimer генерируется при истечении времени таймера

Технологии:

1. Адаптивная вёрсткая
2. Использование препроцессора Sass/SCSS
3. Использование методологии БЭМ
4. JavaScript
5. WebComponents API
6. ShadowDOM
7. CustomEvents

Инструкция по развёртыванию:

1. Клонируйте данный репозиторий локально на своё устройство
2. Запустите приложение на локальном сервере (например, с помощью Live Server)

Ссылки

Демо: https://stankena.github.io/custom-timer