Learn JavaScript - 11 Code Examples & CST Typing Practice Test

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.

View all 11 JavaScript code examples →

Vanilla JavaScript Theme Toggle and Counter Vanilla JS Counter Vanilla JS Theme Toggle Vanilla JS LocalStorage Counter Vanilla JS Toggle Visibility Vanilla JS Input Mirror Vanilla JS Simple Tabs Vanilla JS Accordion Vanilla JS Countdown Timer Vanilla JS Modal Popup Vanilla JS Dark Mode Toggle

Learn JAVASCRIPT with Real Code Examples

Updated Nov 21, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Vanilla JavaScript Theme Toggle and Counter

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();
});

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

Let’s Try →

Vanilla JS Counter

document.addEventListener('DOMContentLoaded', () => {
    const counterEl = document.getElementById('counter');
    const incBtn = document.getElementById('increment');
    const decBtn = document.getElementById('decrement');
    const resetBtn = document.getElementById('reset');
    let count = 0;

    const updateUI = () => counterEl.textContent = `Counter: ${count}`;

    incBtn.addEventListener('click', () => { count++; updateUI(); });
    decBtn.addEventListener('click', () => { count--; updateUI(); });
    resetBtn.addEventListener('click', () => { count = 0; updateUI(); });

    updateUI();
});

Simple counter with increment, decrement, and reset functionality.

Let’s Try →

Vanilla JS Theme Toggle

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`;
    });
});

Toggles between light and dark themes using class manipulation.

Let’s Try →

Vanilla JS LocalStorage Counter

document.addEventListener('DOMContentLoaded', () => {
    const counterEl = document.getElementById('counter');
    const incBtn = document.getElementById('increment');
    let count = parseInt(localStorage.getItem('count') || '0', 10);

    const updateUI = () => {
        counterEl.textContent = `Counter: ${count}`;
        localStorage.setItem('count', count);
    };

    incBtn.addEventListener('click', () => { count++; updateUI(); });

    updateUI();
});

Counter that persists its value using localStorage.

Let’s Try →

Vanilla JS Toggle Visibility

document.addEventListener('DOMContentLoaded', () => {
    const toggleBtn = document.getElementById('toggle');
    const box = document.getElementById('box');
    toggleBtn.addEventListener('click', () => {
        box.style.display = box.style.display === 'none' ? 'block' : 'none';
    });
});

Shows or hides an element on button click.

Let’s Try →

Vanilla JS Input Mirror

document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('input');
    const output = document.getElementById('output');
    input.addEventListener('input', () => {
        output.textContent = input.value;
    });
});

Mirrors user input in real-time to another element.

Let’s Try →

Vanilla JS Simple Tabs

document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.content');
    tabs.forEach((tab, i) => {
        tab.addEventListener('click', () => {
        contents.forEach(c => c.style.display = 'none');
        contents[i].style.display = 'block';
        });
    });
});

Switches between tab content sections.

Let’s Try →

Vanilla JS Accordion

document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.accordion-item');
    items.forEach(item => {
        item.querySelector('.title').addEventListener('click', () => {
        item.classList.toggle('open');
        });
    });
});

Creates an accordion where sections can expand/collapse.

Let’s Try →

Vanilla JS Countdown Timer

document.addEventListener('DOMContentLoaded', () => {
    const display = document.getElementById('timer');
    let time = 10;
    const interval = setInterval(() => {
        display.textContent = `Time: ${time}`;
        time--;
        if(time < 0) clearInterval(interval);
    }, 1000);
});

Simple countdown timer that updates every second.

Let’s Try →

Vanilla JS Modal Popup

document.addEventListener('DOMContentLoaded', () => {
    const openBtn = document.getElementById('openModal');
    const closeBtn = document.getElementById('closeModal');
    const modal = document.getElementById('modal');

    openBtn.addEventListener('click', () => modal.style.display = 'block');
    closeBtn.addEventListener('click', () => modal.style.display = 'none');
});

Shows and hides a modal dialog on button clicks.

Let’s Try →

Vanilla JS Dark Mode Toggle

document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById('darkMode');
    btn.addEventListener('click', () => document.body.classList.toggle('dark-mode'));
});

Toggles dark mode class on body with button click.

Let’s Try →

Frequently Asked Questions about JavaScript

What is JavaScript?

What are the primary use cases for JavaScript?

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

What are the strengths of JavaScript?

Runs in all modern browsers. Large and active developer community. Rich ecosystem of frameworks and libraries. Supports both client-side and server-side development. Enables asynchronous, event-driven programming

What are the limitations of JavaScript?

Single-threaded, which may impact CPU-intensive tasks. Browser differences can cause inconsistencies. Dynamic typing may lead to runtime errors. Security issues like XSS need careful handling. Heavy DOM manipulation can reduce performance

How can I practice JavaScript typing speed?

CodeSpeedTest offers 11+ real JavaScript code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Vanilla JavaScript Theme Toggle and Counter

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();
});

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

Let’s Try →

Vanilla JS Counter

document.addEventListener('DOMContentLoaded', () => {
    const counterEl = document.getElementById('counter');
    const incBtn = document.getElementById('increment');
    const decBtn = document.getElementById('decrement');
    const resetBtn = document.getElementById('reset');
    let count = 0;

    const updateUI = () => counterEl.textContent = `Counter: ${count}`;

    incBtn.addEventListener('click', () => { count++; updateUI(); });
    decBtn.addEventListener('click', () => { count--; updateUI(); });
    resetBtn.addEventListener('click', () => { count = 0; updateUI(); });

    updateUI();
});

Simple counter with increment, decrement, and reset functionality.

Let’s Try →

Vanilla JS Theme Toggle

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`;
    });
});

Toggles between light and dark themes using class manipulation.

Let’s Try →

Vanilla JS LocalStorage Counter

document.addEventListener('DOMContentLoaded', () => {
    const counterEl = document.getElementById('counter');
    const incBtn = document.getElementById('increment');
    let count = parseInt(localStorage.getItem('count') || '0', 10);

    const updateUI = () => {
        counterEl.textContent = `Counter: ${count}`;
        localStorage.setItem('count', count);
    };

    incBtn.addEventListener('click', () => { count++; updateUI(); });

    updateUI();
});

Counter that persists its value using localStorage.

Let’s Try →

Vanilla JS Toggle Visibility

document.addEventListener('DOMContentLoaded', () => {
    const toggleBtn = document.getElementById('toggle');
    const box = document.getElementById('box');
    toggleBtn.addEventListener('click', () => {
        box.style.display = box.style.display === 'none' ? 'block' : 'none';
    });
});

Shows or hides an element on button click.

Let’s Try →

Vanilla JS Input Mirror

document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('input');
    const output = document.getElementById('output');
    input.addEventListener('input', () => {
        output.textContent = input.value;
    });
});

Mirrors user input in real-time to another element.

Let’s Try →

Vanilla JS Simple Tabs

document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.content');
    tabs.forEach((tab, i) => {
        tab.addEventListener('click', () => {
        contents.forEach(c => c.style.display = 'none');
        contents[i].style.display = 'block';
        });
    });
});

Switches between tab content sections.

Let’s Try →

Vanilla JS Accordion

document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.accordion-item');
    items.forEach(item => {
        item.querySelector('.title').addEventListener('click', () => {
        item.classList.toggle('open');
        });
    });
});

Creates an accordion where sections can expand/collapse.

Let’s Try →

Vanilla JS Countdown Timer

document.addEventListener('DOMContentLoaded', () => {
    const display = document.getElementById('timer');
    let time = 10;
    const interval = setInterval(() => {
        display.textContent = `Time: ${time}`;
        time--;
        if(time < 0) clearInterval(interval);
    }, 1000);
});

Simple countdown timer that updates every second.

Let’s Try →

Vanilla JS Modal Popup

document.addEventListener('DOMContentLoaded', () => {
    const openBtn = document.getElementById('openModal');
    const closeBtn = document.getElementById('closeModal');
    const modal = document.getElementById('modal');

    openBtn.addEventListener('click', () => modal.style.display = 'block');
    closeBtn.addEventListener('click', () => modal.style.display = 'none');
});

Shows and hides a modal dialog on button clicks.

Let’s Try →

Vanilla JS Dark Mode Toggle

document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById('darkMode');
    btn.addEventListener('click', () => document.body.classList.toggle('dark-mode'));
});

Toggles dark mode class on body with button click.

Let’s Try →

Frequently Asked Questions about JavaScript

What is JavaScript?

What are the primary use cases for JavaScript?

What are the strengths of JavaScript?

What are the limitations of JavaScript?

How can I practice JavaScript typing speed?

CodeSpeedTest offers 11+ real JavaScript code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.