TP4 - Interactions avec JavaScript

// Gestion des événements en JavaScript

// 1. Événement de clic
const btnClic = document.getElementById('btnClic');
let compteur = 0;

btnClic.addEventListener('click', function() {
    compteur++;
    document.getElementById('messageClic').textContent = 
        `Vous avez cliqué ${compteur} fois!`;
    document.getElementById('compteurClic').textContent = 
        `Compteur: ${compteur}`;
    
    // Changer la couleur du bouton
    btnClic.style.backgroundColor = compteur % 2 === 0 ? 
        '#4361ee' : '#f72585';
});

// 2. Événements de souris
const zoneSouris = document.getElementById('zoneSouris');

zoneSouris.addEventListener('mouseenter', function() {
    this.style.backgroundColor = '#e9ecef';
    this.textContent = 'Souris entrée dans la zone!';
});

zoneSouris.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '#f8f9fa';
    this.textContent = 'Souris sortie de la zone';
});

zoneSouris.addEventListener('mousemove', function(e) {
    const x = e.offsetX;
    const y = e.offsetY;
    document.getElementById('positionSouris').textContent = 
        `Position: (${x}, ${y})`;
});

// 3. Événements clavier
const inputClavier = document.getElementById('inputClavier');
let touches = 0;

inputClavier.addEventListener('keyup', function(e) {
    touches++;
    document.getElementById('messageClavier').textContent = 
        `Vous avez tapé: ${this.value}`;
    document.getElementById('compteurTouches').textContent = 
        `Nombre de touches: ${touches}`;
});

// 4. Lecture de fichiers
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    
    reader.onload = function(e) {
        const content = e.target.result;
        document.getElementById('fileContent').textContent = 
            `Contenu: ${content.substring(0, 200)}...`;
        document.getElementById('fileInfo').textContent = 
            `Fichier: ${file.name} (${file.size} octets)`;
    };
    
    reader.readAsText(file);
});

// 5. Formulaire
const monFormulaire = document.getElementById('monFormulaire');

monFormulaire.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const nom = document.getElementById('nomForm').value;
    const email = document.getElementById('emailForm').value;
    
    document.getElementById('resultatForm').innerHTML = `
        

            ✅ Formulaire soumis!
            
Nom: ${nom}
            
Email: ${email}
            
Date: ${new Date().toLocaleString()}
        
    `;
    
    this.reset();
});