Full Featured Counter - Preact Typing CST Test

Full Featured Counter — Preact Code

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function FullCounter() {
	const [count, setCount] = useState(0);
	const [history, setHistory] = useState([]);
	const [isDark, setIsDark] = useState(false);
	const step = 2, max = 10;
	useEffect(() => { const interval = setInterval(() => { setCount(c => { let n = c + step; if(n > max) n = 0; setHistory(h => [...h,'Auto Increment']); return n; }); },1000); return () => clearInterval(interval); }, []);
	const increment = () => { setCount(c => c + step); setHistory(h => [...h,'Increment']); };
	const decrement = () => { setCount(c => c - step); setHistory(h => [...h,'Decrement']); };
	const reset = () => { setCount(0); setHistory(h => [...h,'Reset']); };
	return (
		<div className={isDark ? 'dark-theme' : 'light-theme'}>
		<h2>Counter: {count}</h2>
		<div>History: {history.join(', ')}</div>
		<button onClick={increment}>+</button>
		<button onClick={decrement}>-</button>
		<button onClick={reset}>Reset</button>
		<button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
		</div>
	);
}

export default FullCounter;

Preact Language Guide

Preact is a fast, lightweight JavaScript library for building user interfaces with a React-like API. It emphasizes small bundle size, performance, and compatibility with modern web standards while providing an easy transition for React developers.

More Preact Typing Exercises

Practice Other Languages