37 lines
868 B
JavaScript
37 lines
868 B
JavaScript
|
const html = require('../../../html')
|
||
|
|
const format = require('../utilities/format')
|
||
|
|
|
||
|
|
function toggle (state, send) {
|
||
|
|
if (state.start) {
|
||
|
|
send('stop')
|
||
|
|
} else {
|
||
|
|
send('start')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = (state, prev, send) => {
|
||
|
|
const start = state.start
|
||
|
|
const elapsed = state.elapsed
|
||
|
|
|
||
|
|
return html`
|
||
|
|
<main class="app">
|
||
|
|
<h1>stopwatch</h1>
|
||
|
|
<p>${format(elapsed)}</p>
|
||
|
|
<button
|
||
|
|
onclick=${e => toggle(state, send)}
|
||
|
|
>${start ? 'stop' : 'start'}</button>
|
||
|
|
<button
|
||
|
|
style="display:${start ? 'none' : 'inline'};"
|
||
|
|
onclick=${e => send('reset')}
|
||
|
|
>reset</button>
|
||
|
|
<button
|
||
|
|
style="display:${start ? 'inline' : 'none'};"
|
||
|
|
onclick=${e => send('add', format(elapsed))}
|
||
|
|
>lap</button>
|
||
|
|
<ol>
|
||
|
|
${state.laps.map(lap => html`<li>${lap}</li>`)}
|
||
|
|
</ol>
|
||
|
|
</main>
|
||
|
|
`
|
||
|
|
}
|