Learn JAVASCRIPT with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.