Stimulus.js Counter with Dark Mode Only - Stimulus-js Typing CST Test

Stimulus.js Counter with Dark Mode Only — Stimulus-js Code

Static counter with only dark/light theme toggle.

<div data-controller="counter" data-counter-dark-value="false">
	<h2>Counter: 0</h2>
	<button data-action="click->counter#toggleTheme">Toggle Theme</button>
</div>
<script>
	import { Application } from '@hotwired/stimulus';
	const application = Application.start();
	application.register('counter', class extends Stimulus.Controller {
		static values = { dark: Boolean };
		connect() {}
		toggleTheme() { this.darkValue = !this.darkValue; this.element.className = this.darkValue ? 'dark-theme' : 'light-theme'; }
	});
</script>
<style>.dark-theme{background:#222;color:#eee}.light-theme{background:#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