Full Featured Counter - Qwik Typing CST Test

Full Featured Counter — Qwik Code

Combines step, history, auto-increment, and theme toggle in a single Qwik component.

import { component$, useStore, useTask$ } from '@builder.io/qwik';

export const FullCounter = component$(({ step = 2, autoIncrement = true }) => {
	const state = useStore({ count: 0, history: [], isDark: false });
	const updateHistory = (action) => state.history.push(action);
	useTask$(() => {
		if(autoIncrement){
		const interval = setInterval(() => { state.count += step; updateHistory('Auto increment'); }, 1000);
		return () => clearInterval(interval);
		}
	});
	return (
		<div class={state.isDark ? 'dark-theme' : 'light-theme'}>
		<h2>Counter: {state.count}</h2>
		<div>History: {state.history.join(', ')}</div>
		<button onClick$={() => { state.count += step; updateHistory('Increment'); }}>+</button>
		<button onClick$={() => { state.count -= step; updateHistory('Decrement'); }}>-</button>
		<button onClick$={() => { state.count = 0; updateHistory('Reset'); }}>Reset</button>
		<button onClick$={() => state.isDark = !state.isDark}>Toggle Theme</button>
		</div>
	);
});

Qwik Language Guide

Qwik is a next-generation, ultra-fast web framework designed around resumability instead of hydration, enabling instant loading, fine-grained lazy execution, and optimal performance for large-scale interactive applications.

More Qwik Typing Exercises

Practice Other Languages