Counter with Auto Increment - Aurelia Typing CST Test

Counter with Auto Increment — Aurelia Code

Counter that can auto-increment every second.

export class Counter {
	count = 0;
	auto = false;
	isDark = false;

	autoToggle() {
		this.auto = !this.auto;
		if(this.auto) this.timer = setInterval(() => this.count++, 1000);
		else clearInterval(this.timer);
	}

	increment() { this.count++; }
	decrement() { this.count--; }
	reset() { this.count = 0; }
	toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
	<h2>Counter: ${count}</h2>
	<div>
		<button click.delegate="increment()">+</button>
		<button click.delegate="decrement()">-</button>
		<button click.delegate="reset()">Reset</button>
		<button click.delegate="autoToggle()">${auto ? 'Stop Auto' : 'Start Auto'}</button>
	</div>
	<button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Aurelia Language Guide

Aurelia is a modern, open-source, front-end framework focused on clean architecture, minimal boilerplate, and standards-based development. It emphasizes unobtrusive conventions and powerful data binding.

More Aurelia Typing Exercises

Practice Other Languages