Counter with Color Themes - Aurelia Typing CST Test

Counter with Color Themes — Aurelia Code

Counter supporting multiple color themes.

export class Counter {
	count = 0;
	theme = 'light';

	increment() { this.count++; }
	decrement() { this.count--; }
	reset() { this.count = 0; }
	toggleTheme() {
		this.theme = this.theme === 'light' ? 'dark' : this.theme === 'dark' ? 'blue' : 'light';
	}
}

<div class.bind="theme + '-theme'">
	<h2>Counter: ${count}</h2>
	<div>
		<button click.delegate="increment()">+</button>
		<button click.delegate="decrement()">-</button>
		<button click.delegate="reset()">Reset</button>
	</div>
	<button click.delegate="toggleTheme()">Switch 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