Theme Toggle and Counter - TypeScript Typing CST Test

Theme Toggle and Counter — TypeScript Code

Demonstrates state management, DOM manipulation, localStorage, and theme toggling using TypeScript with proper typing.

document.addEventListener('DOMContentLoaded', () => {
	const counterEl = document.getElementById('counter') as HTMLElement;
	const incrementBtn = document.getElementById('increment') as HTMLButtonElement;
	const decrementBtn = document.getElementById('decrement') as HTMLButtonElement;
	const resetBtn = document.getElementById('reset') as HTMLButtonElement;
	const toggleThemeBtn = document.getElementById('toggleTheme') as HTMLButtonElement;
	const appEl = document.getElementById('app') as HTMLElement;

	let count: number = parseInt(localStorage.getItem('count') || '0', 10);
	let isDark: boolean = localStorage.getItem('isDark') === 'true';

	const updateUI = (): void => {
		counterEl.textContent = `Counter: ${count}`;
		appEl.className = isDark ? 'dark-theme' : 'light-theme';
		toggleThemeBtn.textContent = `Switch to ${isDark ? 'Light' : 'Dark'} Theme`;
	};

	incrementBtn.addEventListener('click', () => { count++; saveAndUpdate(); });
	decrementBtn.addEventListener('click', () => { count--; saveAndUpdate(); });
	resetBtn.addEventListener('click', () => { count = 0; saveAndUpdate(); });
	toggleThemeBtn.addEventListener('click', () => { isDark = !isDark; saveAndUpdate(); });

	function saveAndUpdate(): void {
		localStorage.setItem('count', count.toString());
		localStorage.setItem('isDark', isDark.toString());
		updateUI();
	}

	updateUI();
});

TypeScript Language Guide

TypeScript is a statically typed superset of JavaScript that enhances developer productivity, scalability, and reliability by adding static types, modern tooling, and advanced language features while compiling to plain JavaScript for any runtime.

More TypeScript Typing Exercises

Practice Other Languages