Counter with Auto Increment - Hyperapp Typing CST Test

Counter with Auto Increment — Hyperapp Code

Counter that automatically increments every second.

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, isDark: false, auto: false };
const actions = {
	increment: () => s => ({ count: s.count + 1 }),
	decrement: () => s => ({ count: s.count - 1 }),
	reset: () => s => ({ count: 0 }),
	toggleTheme: () => s => ({ isDark: !s.isDark }),
	toggleAuto: () => s => {
		if (!s.auto) { s.timer = setInterval(() => actions.increment(), 1000); }
		else clearInterval(s.timer);
		return { auto: !s.auto };
	}
};
const view = (s, a) => (
	h('div', { class: s.isDark ? 'dark-theme' : 'light-theme' }, [
		h('h2', {}, 'Counter: ' + s.count),
		h('div', {}, [
		h('button', { onclick: a.increment }, '+'),
		h('button', { onclick: a.decrement }, '-'),
		h('button', { onclick: a.reset }, 'Reset'),
		h('button', { onclick: a.toggleAuto }, s.auto ? 'Stop Auto' : 'Start Auto')
		]),
		h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
	])
);
app({ init: state, view, node: document.body, actions });

Hyperapp Language Guide

Hyperapp is an ultra-lightweight (≈1 KB), functional JavaScript library for building user interfaces using a minimalist architecture of state, actions, and a virtual DOM. It emphasizes simplicity, purity, and predictable UI updates.

More Hyperapp Typing Exercises

Practice Other Languages