Ember.js Basic Counter - Ember-js Typing CST Test

Ember.js Basic Counter — Ember-js Code

Basic Ember.js counter with dark/light theme toggle.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class CounterComponent extends Component {
	@tracked count = 0;
	@tracked isDark = false;

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

<!-- counter.hbs -->
<div class={{if this.isDark 'dark-theme' 'light-theme'}}>
	<h2>Counter: {{this.count}}</h2>
	<div>
		<button {{on 'click' this.increment}}>+</button>
		<button {{on 'click' this.decrement}}>-</button>
		<button {{on 'click' this.reset}}>Reset</button>
	</div>
	<button {{on 'click' this.toggleTheme}}>Switch Theme</button>
</div>

Ember-js Language Guide

Ember.js is a mature, full-featured JavaScript framework for building ambitious web applications. It emphasizes convention over configuration, strong defaults, and long-term stability.

More Ember-js Typing Exercises

Practice Other Languages