Stimulus.js Counter with Conditional Theme - Stimulus-js Typing CST Test

Stimulus.js Counter with Conditional Theme — Stimulus-js Code

Theme changes automatically based on even/odd counter value.

<div data-controller="counter" data-counter-count-value="0">
	<h2>Counter: <span data-counter-target="count">0</span></h2>
	<button data-action="click->counter#increment">+</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 };
		connect() { this.updateDisplay(); }
		increment() { this.countValue++; this.updateDisplay(); }
		updateDisplay() { this.element.className = (this.countValue%2===0) ? 'dark-theme' : 'light-theme'; this.countTarget.textContent=this.countValue; }
	});
</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