Learn JQUERY with Real Code Examples

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Basic counter with increment, decrement, reset, and theme toggle.

$(document).ready(function() {
    var count = 0;
    var step = 5;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count += step; updateCounter(); });
    $('#decrement').click(function() { count -= step; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter increments/decrements by a custom step value.

$(document).ready(function() {
    var count = 0;
    var min = 0;
    var max = 10;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { if(count < max) count++; updateCounter(); });
    $('#decrement').click(function() { if(count > min) count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter that respects minimum and maximum limits.

$(document).ready(function() {
    var count = 0;
    var isDark = false;
    var auto = false;
    var timer;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
        $('#auto-btn').text(auto ? 'Stop Auto' : 'Start Auto');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });
    $('#auto-btn').click(function() {
        auto = !auto;
        if(auto) timer = setInterval(function(){ count++; updateCounter(); }, 1000);
        else clearInterval(timer);
        updateCounter();
    });

    updateCounter();
});

Counter automatically increments every second.

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#double-increment').click(function() { count += 2; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Special button increments counter by 2.

$(document).ready(function() {
    var count = 0;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#parity').text(count % 2 === 0 ? 'Even' : 'Odd');
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Shows whether the counter value is even or odd.

$(document).ready(function() {
    var count = 0;
    var step = 5;
    var min = 0;
    var max = 50;
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
    }

    $('#increment').click(function() { if(count + step <= max) count += step; updateCounter(); });
    $('#decrement').click(function() { if(count - step >= min) count -= step; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Counter with custom step value and boundaries.

$(document).ready(function() {
    var count = parseInt(localStorage.getItem('count') || 0);
    var isDark = false;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').toggleClass('dark-theme', isDark);
        $('#container').toggleClass('light-theme', !isDark);
        $('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
        localStorage.setItem('count', count);
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });

    updateCounter();
});

Persists counter value in localStorage.

$(document).ready(function() {
    var count = 0;
    var themes = ['light-theme','dark-theme','blue-theme'];
    var current = 0;

    function updateCounter() {
        $('#counter').text(count);
        $('#container').attr('class', themes[current]);
        $('#theme-btn').text('Switch Theme');
    }

    $('#increment').click(function() { count++; updateCounter(); });
    $('#decrement').click(function() { count--; updateCounter(); });
    $('#reset').click(function() { count = 0; updateCounter(); });
    $('#theme-btn').click(function() { current = (current + 1) % themes.length; updateCounter(); });

    updateCounter();
});

Cycles through multiple color themes.