Full Featured Counter - Lit Typing CST Test

Full Featured Counter — Lit Code

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

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('lit-full-counter')
export class LitFullCounter extends LitElement {
	@state() count = 0;
	@state() history = [];
	@state() isDark = false;
	step = 2;
	max = 10;
	connectedCallback() { super.connectedCallback(); this.interval = setInterval(()=>{ let c=this.count+this.step; if(c>this.max)c=0; this.count=c; this.history=[...this.history,'Auto Increment']; },1000); }
	disconnectedCallback() { clearInterval(this.interval); super.disconnectedCallback(); }
	static styles = css`.dark-theme{background:#222;color:#eee}.light-theme{background:#fff;color:#000}`;
	render() { return html`<div class=${this.isDark?'dark-theme':'light-theme'}>
	<h2>Counter: ${this.count}</h2>
	<div>History: ${this.history.join(', ')}</div>
	<button @click=${()=>{ this.count+=this.step; this.history=[...this.history,'Increment']; }}>+</button>
	<button @click=${()=>{ this.count-=this.step; this.history=[...this.history,'Decrement']; }}>-</button>
	<button @click=${()=>{ this.count=0; this.history=[...this.history,'Reset']; }}>Reset</button>
	<button @click=${()=>this.isDark=!this.isDark}>Toggle Theme</button>
</div>`; }
}

Lit Language Guide

Lit is a lightweight, fast, web-component-focused library for building reactive and declarative UI using standard web platform features. It emphasizes interoperability, small bundle sizes, and declarative templating with lit-html.

More Lit Typing Exercises

Practice Other Languages