Stimulus.js Counter Controller - Stimulus-js Typing CST Test

Stimulus.js Counter Controller — Stimulus-js Code

Basic counter using Stimulus.js with dark/light theme toggle.

<div data-controller="counter" data-counter-dark-value="false" data-counter-count-value="0">
	<h2>Counter: <span data-counter-target="count">0</span></h2>
	<div>
		<button data-action="click->counter#increment">+</button>
		<button data-action="click->counter#decrement">-</button>
		<button data-action="click->counter#reset">Reset</button>
	</div>
	<button data-action="click->counter#toggleTheme">Switch Theme</button>
</div>

<script>
	import { Application } from '@hotwired/stimulus';
	const application = Application.start();

	application.register('counter', class extends Stimulus.Controller {
		static targets = ['count'];
		static values = { count: Number, dark: Boolean };
		connect() { this.updateDisplay(); }
		increment() { this.countValue++; this.updateDisplay(); }
		decrement() { this.countValue--; this.updateDisplay(); }
		reset() { this.countValue = 0; this.updateDisplay(); }
		toggleTheme() { this.darkValue = !this.darkValue; this.updateDisplay(); }
		updateDisplay() { this.countTarget.textContent = this.countValue; this.element.className = this.darkValue ? 'dark-theme' : 'light-theme'; }
	});
</script>

<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>

Stimulus-js Language Guide

Stimulus.js is a modest JavaScript framework designed to enhance static HTML by connecting elements to JavaScript controllers. It complements server-rendered HTML, making it ideal for modestly interactive UIs without a heavy frontend framework.

More Stimulus-js Typing Exercises

Practice Other Languages