Ember.js Full Featured Counter - Ember-js Typing CST Test

Ember.js Full Featured Counter — Ember-js Code

Combines step, max, auto-reset, history, auto-increment, and theme toggle.

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

export default class FullCounterComponent extends Component {
	@tracked count = 0;
	@tracked history = [];
	@tracked isDark = false;
	step = 2;
	max = 10;

	constructor() {
		super(...arguments);
		setInterval(() => {
		let n = this.count + this.step;
		if(n > this.max) n = 0;
		this.count = n;
		this.history = [...this.history, 'Auto Increment'];
		}, 1000);
	}

	@action increment() { let n = this.count + this.step; if(n>this.max)n=0; this.count=n; this.history = [...this.history,'Increment']; }
	@action decrement() { this.count -= this.step; this.history = [...this.history,'Decrement']; }
	@action reset() { this.count = 0; this.history = [...this.history,'Reset']; }
	@action toggleTheme() { this.isDark = !this.isDark; }
}

<!-- full-counter.hbs -->
<div class={{if this.isDark 'dark-theme' 'light-theme'}}>
	<h2>Counter: {{this.count}}</h2>
	<div>History: {{this.history}}</div>
	<button {{on 'click' this.increment}}>+</button>
	<button {{on 'click' this.decrement}}>-</button>
	<button {{on 'click' this.reset}}>Reset</button>
	<button {{on 'click' this.toggleTheme}}>Toggle 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