1. Home
  2. /
  3. JavaScript
  4. /
  5. Vanilla JS Theme Toggle

Vanilla JS Theme Toggle - JavaScript Typing CST Test

Loading…

Vanilla JS Theme Toggle — JavaScript Code

Toggles between light and dark themes using class manipulation.

document.addEventListener('DOMContentLoaded', () => {
	const toggleBtn = document.getElementById('toggleTheme');
	const appEl = document.getElementById('app');
	let isDark = false;

	toggleBtn.addEventListener('click', () => {
		isDark = !isDark;
		appEl.className = isDark ? 'dark-theme' : 'light-theme';
		toggleBtn.textContent = `Switch to ${isDark ? 'Light' : 'Dark'} Theme`;
	});
});

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.

Primary Use Cases

  • ▸Adding interactivity to web pages
  • ▸Manipulating the DOM and HTML elements dynamically
  • ▸Form validation and user input handling
  • ▸Creating web applications and single-page applications (SPA)
  • ▸Server-side development with Node.js

Notable Features

  • ▸Event handling and listeners
  • ▸Asynchronous programming with Promises and async/await
  • ▸Prototype-based object-oriented programming
  • ▸Dynamic typing and flexible syntax
  • ▸Extensive ecosystem of libraries and frameworks (React, Angular, Vue)

Origin & Creator

Created by Brendan Eich in 1995 at Netscape Communications.

Industrial Note

JavaScript is specialized for web interactivity, dynamic content updates, and client-side logic, but it is also widely used for server-side applications via Node.js.

More JavaScript Typing Exercises

Vanilla JavaScript Theme Toggle and CounterVanilla JS CounterVanilla JS LocalStorage CounterVanilla JS Toggle VisibilityVanilla JS Input MirrorVanilla JS Simple TabsVanilla JS AccordionVanilla JS Countdown TimerVanilla JS Modal PopupVanilla JS Dark Mode Toggle

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher