script.js

/* ===============================================================
   DÉMARRAGE DU SCRIPT
   L'événement "DOMContentLoaded" indique qu'on attend que la 
   page web HTML entière soit bien chargée avant d'exécuter ce code.
   Si on ne fait pas ça, le JavaScript risque d'essayer de modifier 
   des éléments HTML qui n'existent pas encore à l'écran !
   =============================================================== */
document.addEventListener("DOMContentLoaded", () => {
    
    /* ===============================================================
       1. ANIMATION DES BARRES DE COMPÉTENCES AU DÉFILEMENT (SCROLL)
       =============================================================== */
    
    // querySelectorAll permet de chercher et de stocker en mémoire 
    // TOUTES les divs HTML qui portent la classe CSS ".progress-fill".
    // C'est ce qui représente nos barres bleues (cyan).
    const fills = document.querySelectorAll('.progress-fill');
    
    // L'IntersectionObserver est un outil natif ultra-pratique du navigateur.
    // Il sert de "jumelles" : il observe l'écran et nous alerte quand un 
    // élément spécifique entre dans le champ de vision de l'utilisateur (pendant le scroll).
    const observer = new IntersectionObserver((entries) => {
        
        // Pour chaque barre de progression qu'on est en train d'observer...
        entries.forEach(entry => {
            
            // "isIntersecting" veut dire : "Est-ce que l'élément est maintenant visible ?"
            if (entry.isIntersecting) {
                const element = entry.target; // On cible la barre exacte qu'on vient de voir
                
                // On récupère sa vraie largeur (celle écrite dans le HTML, ex: 80% ou 90%)
                const width = element.style.width;
                
                // MAGIE : on remet sa largeur à 0 immédiatement. (Elle se vide).
                element.style.width = '0';
                
                // setTimeout permet de créer un léger délai. 
                // Après 100 millisecondes (soit 0.1 seconde)...
                setTimeout(() => {
                    // ... on lui redonne sa vraie largeur.
                    // Comme dans le CSS on a mis "transition: width 1.5s", 
                    // la barre va se remplir doucement et visuellement sous les yeux de l'utilisateur !
                    element.style.width = width;
                }, 100);
                
                // Une fois l'animation jouée, on demande à nos "jumelles" (observer)
                // d'arrêter de surveiller cette barre précise.
                // Sinon, l'animation recommencerait à chaque fois qu'on monte et descend la page.
                observer.unobserve(element);
            }
        });
    }, { threshold: 0.5 }); // threshold: 0.5 signifie "Déclenche-toi dès que la MOITIÉ (50%) de la barre est visible à l'écran"

    // Pour finir, on attache officiellement notre "observateur" sur chacune de nos barres
    // trouvées tout à l'heure grâce à la boucle "forEach" (Pour chaque...)
    fills.forEach(fill => observer.observe(fill));



    /* ===============================================================
       2. GESTION DU FORMULAIRE DE CONTACT
       =============================================================== */
    
    // On récupère dans le HTML le formulaire complet grâce à son "id" (identifiant unique)
    const form = document.getElementById('contact-form');
    // On récupère la balise <div> vide où on affichera le message de remerciement
    const feedback = document.getElementById('form-feedback');

    // On vérifie que le formulaire existe bien sur la page pour éviter un crash
    if (form) {
        
        // On "écoute" un événement précis : "submit" (C'est-à-dire quand l'utilisateur clique sur le bouton ENVOYER)
        form.addEventListener('submit', (e) => {
            
            // SUPER IMPORTANT : par défaut, envoyer un formulaire HTML recharge la page web.
            // .preventDefault() bloque ce comportement pour qu'on puisse rester sur la même page
            // et simuler l'envoi "en arrière-plan".
            e.preventDefault();
            
            // On récupère ce que l'utilisateur a tapé dans la case "prénom"
            const prenom = document.getElementById('prenom').value;
            
            // On cible le bouton d'envoi lui-même
            const submitBtn = form.querySelector('.btn-submit');
            
            // On met en mémoire le texte écrit sur le bouton (normalement "Envoyer")
            const originalText = submitBtn.textContent;
            
            // On modifie l'aspect du bouton pour faire croire que le site réfléchit.
            submitBtn.textContent = 'Envoi en cours...'; // Le texte change
            submitBtn.style.opacity = '0.7'; // Le bouton devient un peu transparent (70%)
            
            // setTimeout simule ici le délai d'internet ou du serveur. 
            // On demande à l'ordinateur de patienter 1500 millisecondes (1,5 seconde) avant de lire le code à l'intérieur.
            setTimeout(() => {
                
                // Une fois les 1.5 secondes écoulées, on remet le bouton à la normale.
                submitBtn.textContent = originalText;
                submitBtn.style.opacity = '1';
                
                // On affiche notre message personnalisé à l'écran en utilisant la variable "prenom" !
                feedback.textContent = `Merci ${prenom}, votre message a bien été envoyé !`;
                
                // form.reset() vide instantanément tous les champs du formulaire (texte tapé)
                form.reset();
                
                // On relance un compte à rebours de 5 secondes...
                setTimeout(() => {
                    // ... pour effacer le message de remerciement après l'avoir lu
                    feedback.textContent = '';
                }, 5000); 
                
            }, 1500); // Fin du délai d'envoi
        });
    }
});