Skip to content

Instantly share code, notes, and snippets.

@odoe

odoe/Stopwatch.m.css

Created Mar 29, 2020
Embed
What would you like to do?
dojo timer widget
@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);
}
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>
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment