Riot.js Full Featured Counter - Riot-js Typing CST Test

Riot.js Full Featured Counter — Riot-js Code

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

<full-counter>
	<h2>Counter: {state.count}</h2>
	<div>History: {state.history.join(', ')}</div>
	<button onclick={() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Increment'); }}>+</button>
	<button onclick={() => { state.count-=state.step; state.history.push('Decrement'); }}>-</button>
	<button onclick={() => { state.count=0; state.history.push('Reset'); }}>Reset</button>
	<button onclick={() => state.isDark=!state.isDark}>Toggle Theme</button>

	<script>
		export default {
		state: { count: 0, history: [], isDark: false, step: 2, max: 10 },
		onMounted() {
		setInterval(() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Auto Increment'); }, 1000);
		}
		}
	</script>
</full-counter>

Riot-js Language Guide

Riot.js is a lightweight, client-side JavaScript framework for building web applications with a component-based architecture. It combines simple syntax, a virtual DOM, and reactive data binding to create maintainable, modular UI components.

More Riot-js Typing Exercises

Practice Other Languages