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

Stimulus.js Full Featured Counter — Stimulus-js Code

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

<div data-controller="counter" data-counter-count-value="0" data-counter-dark-value="false" data-counter-step-value="2" data-counter-max-value="10">
	<h2>Counter: <span data-counter-target="count">0</span></h2>
	<div>History: <span data-counter-target="history"></span></div>
	<div>
		<button data-action="click->counter#increment">+</button>
		<button data-action="click->counter#decrement">-</button>
		<button data-action="click->counter#reset">Reset</button>
		<button data-action="click->counter#toggleTheme">Toggle Theme</button>
	</div>
</div>
<script>
	import { Application } from '@hotwired/stimulus';
	const application = Application.start();
	application.register('counter', class extends Stimulus.Controller {
		static targets = ['count','history'];
		static values = { count:Number,dark:Boolean,step:Number,max:Number };
		history=[];
		connect(){ this.interval=setInterval(()=>{ let c=this.countValue+this.stepValue; if(c>this.maxValue)c=0; this.countValue=c; this.history=[...this.history,'Auto Increment']; this.updateDisplay(); },1000); this.updateDisplay();}
		disconnectedCallback(){clearInterval(this.interval);}
		increment(){ this.countValue+=this.stepValue; this.history=[...this.history,'Increment']; this.updateDisplay(); }
		decrement(){ this.countValue-=this.stepValue; this.history=[...this.history,'Decrement']; this.updateDisplay(); }
		reset(){ this.countValue=0; this.history=[...this.history,'Reset']; this.updateDisplay(); }
		toggleTheme(){ this.darkValue=!this.darkValue; this.updateDisplay(); }
		updateDisplay(){ this.countTarget.textContent=this.countValue; this.historyTarget.textContent=this.history.join(', '); 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