Riot.js Counter Component - Riot-js Typing CST Test

Riot.js Counter Component — Riot-js Code

Basic Riot.js counter with dark/light theme toggle.

<counter>
	<h2>Counter: {state.count}</h2>
	<div>
		<button onclick={() => state.count++}>+</button>
		<button onclick={() => state.count--}>-</button>
		<button onclick={() => state.count = 0}>Reset</button>
	</div>
	<button onclick={() => state.isDark = !state.isDark}>Switch to {state.isDark ? 'Light' : 'Dark'} Theme</button>

	<script>
		export default {
		state: { count: 0, isDark: false }
		}
	</script>
</counter>

<script type="module">
	import { component } from 'riot';
	import Counter from './counter.riot';
	component(Counter)(document.body);
</script>
<style>
	.dark-theme { background-color: #222; color: #eee; }
	.light-theme { background-color: #fff; color: #000; }
</style>

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