Vanilla JavaScript Theme Toggle and Counter - JavaScript Typing CST Test

Vanilla JavaScript Theme Toggle and Counter — JavaScript Code

Demonstrates state management, DOM manipulation, localStorage, and theme toggling in pure JavaScript without any frameworks.

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

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

	const updateUI = () => {
		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() {
		localStorage.setItem('count', count);
		localStorage.setItem('isDark', isDark);
		updateUI();
	}

	updateUI();
});

JavaScript Language Guide

JavaScript is a high-level, interpreted programming language primarily used to create dynamic and interactive content on web pages. It enables client-side scripting, DOM manipulation, and integration with HTML and CSS.

More JavaScript Typing Exercises

Practice Other Languages