dojo timer widget

Stopwatch.m.css

@import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');
@import './variables.css';

.root {
	padding: 1rem;
	text-align: center;
}

.timer {
	font-family: 'Orbitron', sans-serif;
	font-size: 3rem;
	font-weight: 600;
}

.timerbase {
	color: var(--button-base-color);
}

.timerwarn {
	color: var(--button-warn-color);
}

.toggle {
	padding: 15px 50px;
	text-transform: uppercase;
	background: var(--primary-color);
	border: 2px solid var(--primary-color);
	color: var(--secondary-color);
	font-weight: 600;
	font-size: .75rem;
	border-radius: 0;
	cursor: pointer;
	transition: all .4s;
	margin: 1rem;
}

.toggle:hover {
	opacity: 0.8;
	box-shadow: var(--shadow-color);
}

Stopwatch.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import { icache } from '@dojo/framework/core/middleware/icache';
import theme from '@dojo/framework/core/middleware/theme';

import * as css from './Stopwatch.m.css';

interface StopwatchProperties {
	timerCount: number;
}

function formatTime(time: number) {
	const minutes = Math.floor(time / 60);
	const seconds = time - minutes * 60;
	return `${String(minutes).padStart(2, '0')} : ${String(seconds).padStart(2, '0')}`;
}

const factory = create({ icache, theme }).properties<StopwatchProperties>();

export default factory(function Stopwatch({ middleware: { icache, theme }, properties}) {
	// styles
	const { root, timer, timerbase, timerwarn, toggle } = theme.classes(css);

	const { timerCount  } = properties();
	const intervalId = icache.get<number>('intervalId');
	const started = icache.get('started');
	function toggleTimer() {
		icache.set('started', !started);
		if (started && intervalId) {
			clearInterval(intervalId);
			icache.set('intervalId', null);
			icache.set('count', timerCount);
		}
		else {
			const id = setInterval(() => {
				const count = icache.getOrSet('count', timerCount);
				if (count < 1) {
					clearInterval(id);
					icache.set('intervalId', null);
					icache.set('count', timerCount);
				}
				else {
					icache.set('count', count - 1);
				}
			}, 1000);
			icache.set('intervalId', id);
		}
	};
	const currentTime = icache.getOrSet('count', timerCount);
	return (
		<div classes={[root]}>
			<div classes={[timer, (currentTime < 60) ? timerwarn : timerbase]}>{formatTime(currentTime)}</div>
			<hr />
			<div>
				<button classes={[toggle]} onclick={toggleTimer}>{intervalId ? 'Stop' : 'Start'}</button>
				<button classes={[toggle]} onclick={() => icache.set('count', timerCount)}>Reset</button>
			</div>
		</div>
	);
});