Counter with Step - Aurelia Typing CST Test
Loading…
Counter with Step — Aurelia Code
Counter that increments/decrements by a custom step value.
export class Counter {
count = 0;
step = 5;
isDark = false;
increment() { this.count += this.step; }
decrement() { this.count -= this.step; }
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()">+ ${step}</button>
<button click.delegate="decrement()">- ${step}</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.
Primary Use Cases
- ▸Enterprise-grade SPA development
- ▸Modular, maintainable business applications
- ▸Highly data-bound interfaces
- ▸Standards-based ES module projects
- ▸Custom framework/tooling integrations
Notable Features
- ▸Powerful two-way data binding
- ▸Convention over configuration (but less strict than Ember)
- ▸Dependency injection container
- ▸Templating based on standards (no proprietary syntax)
- ▸Highly modular architecture
Origin & Creator
Created by Rob Eisenberg in 2015 after leaving the Angular team, built around modern ES standards and extensibility.
Industrial Note
Aurelia is specialized for teams seeking clean architecture, minimal framework intrusion, and deep customizability for enterprise apps.
More Aurelia Typing Exercises
Aurelia Simple CounterAurelia Counter with Max/MinAurelia Counter with Double IncrementAurelia Counter with HistoryAurelia Counter with Auto IncrementAurelia Counter with Limits and StepAurelia Counter with Even/Odd IndicatorAurelia Counter with Double Click IncrementAurelia Counter with Color Themes