script.js

// JS file esterno
document.addEventListener('DOMContentLoaded', function() {
    log('DOM caricato');
    
    // Form submit
    document.getElementById('form').addEventListener('submit', function(e) {
        e.preventDefault();
        const name = document.getElementById('name').value;
        const age = document.getElementById('age').value;
        if (name && age) {
            alert('Form inviato: ' + name);
            log('Form inviato');
        } else {
            alert('Compila tutti i campi');
        }
    });

    // Clear form
    document.getElementById('clear').addEventListener('click', function() {
        document.getElementById('form').reset();
        log('Form pulito');
    });

    // Keyup sul nome
    document.getElementById('name').addEventListener('keyup', function(e) {
        log('Digitazione: ' + e.target.value.length + ' caratteri');
    });

    // Change su select
    document.getElementById('age').addEventListener('change', function(e) {
        log('Età selezionata: ' + e.target.value);
    });

    // Focus/blur su textarea
    document.getElementById('msg').addEventListener('focus', () => log('Focus textarea'));
    document.getElementById('msg').addEventListener('blur', () => log('Blur textarea'));

    // Click su lista
    document.getElementById('list').addEventListener('click', function(e) {
        if (e.target.tagName === 'LI') {
            e.target.style.backgroundColor = '#ffcccc';
            log('Colore item cambiato');
        }
    });

    // Double click su lista
    document.getElementById('list').addEventListener('dblclick', function(e) {
        if (e.target.tagName === 'LI') {
            e.target.style.backgroundColor = '';
            log('Colore item reset');
        }
    });

    // Aggiungi item
    document.getElementById('add').addEventListener('click', function() {
        const li = document.createElement('li');
        li.textContent = 'Nuovo item';
        document.getElementById('list').appendChild(li);
        log('Item aggiunto');
    });

    // Mouse su immagine
    document.getElementById('img').addEventListener('mouseover', function() {
        this.style.transform = 'scale(1.1)';
        log('Mouse su img');
    });
    
    document.getElementById('img').addEventListener('mouseout', function() {
        this.style.transform = 'scale(1)';
        log('Mouse via da img');
    });

    // Clear log
    document.getElementById('clearLog').addEventListener('click', function() {
        document.getElementById('log').innerHTML = '';
    });

    // Click destro su titolo
    document.getElementById('title').addEventListener('contextmenu', function(e) {
        e.preventDefault();
        this.style.fontStyle = this.style.fontStyle === 'italic' ? 'normal' : 'italic';
        log('Click destro su titolo');
    });

    // Scroll
    window.addEventListener('scroll', () => log('Scroll: ' + window.pageYOffset));
    
    // Resize
    window.addEventListener('resize', () => log('Resize: ' + window.innerWidth));

    log('Eventi inizializzati');
});