Mega Counter - Polymer Typing CST Test

Mega Counter — Polymer Code

Combines step, max, auto-reset, history, auto-increment, and theme toggle in one Polymer component.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MegaCounter extends PolymerElement {
	static get properties() {
		return {
		count: { type: Number, value: 0 },
		history: { type: Array, value: () => [] },
		isDark: { type: Boolean, value: false },
		step: { type: Number, value: 2 },
		max: { type: Number, value: 10 }
		};
	}
	constructor() {
		super();
		setInterval(() => {
		let n = this.count + this.step;
		if(n > this.max) n = 0;
		this.count = n;
		this.history = [...this.history, 'Auto Increment'];
		}, 1000);
	}
	static get template() {
		return html`<div class$="${this.isDark?'dark-theme':'light-theme'}">
		<h2>Counter: [[count]]</h2>
		<div>History: [[history]]</div>
		<button on-click="_increment">+</button>
		<button on-click="_decrement">-</button>
		<button on-click="_reset">Reset</button>
		<button on-click="_toggleTheme">Toggle Theme</button>
		</div>`;
	}
	_increment(){ let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history=[...this.history,'Increment']; }
	_decrement(){ this.count-=this.step; this.history=[...this.history,'Decrement']; }
	_reset(){ this.count=0; this.history=[...this.history,'Reset']; }
	_toggleTheme(){ this.isDark=!this.isDark; }
}
customElements.define('mega-counter', MegaCounter);

Polymer Language Guide

Polymer.js is an open-source JavaScript library developed by Google for building reusable Web Components using modern browser APIs. It emphasizes encapsulation, custom elements, and leveraging native browser features with minimal framework overhead.

More Polymer Typing Exercises

Practice Other Languages