Stimulus.js Counter with History - Stimulus-js Typing CST Test

Stimulus.js Counter with History — Stimulus-js Code

Tracks increment/decrement history.

<div data-controller="counter" data-counter-count-value="0">
	<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>
	</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 };
		history = [];
		connect() { this.updateDisplay(); }
		increment() { this.countValue++; this.history.push('Increment'); this.updateDisplay(); }
		decrement() { this.countValue--; this.history.push('Decrement'); this.updateDisplay(); }
		reset() { this.countValue=0; this.history.push('Reset'); this.updateDisplay(); }
		updateDisplay() { this.countTarget.textContent=this.countValue; this.historyTarget.textContent=this.history.join(', '); }
	});
</script>

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