Stimulus.js Counter with Max Limit - Stimulus-js Typing CST Test

Stimulus.js Counter with Max Limit — Stimulus-js Code

Stops incrementing after a maximum count is reached.

<div data-controller="counter" data-counter-count-value="0" data-counter-max-value="5">
	<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>
</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, max: Number };
		connect() { this.updateDisplay(); }
		increment() { if(this.countValue < this.maxValue) this.countValue++; this.updateDisplay(); }
		decrement() { this.countValue--; this.updateDisplay(); }
		reset() { this.countValue = 0; this.updateDisplay(); }
		updateDisplay() { this.countTarget.textContent = this.countValue; }
	});
</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