📋 CORRIGÉ - ÉPREUVE PRATIQUE - JavaScript et DOM

---

Exercice 1 : Sélection et Modification du DOM

// 1. Sélectionnez le titre avec l'ID title
const title = document.getElementById('title');
// Ou avec querySelector : const title = document.querySelector('#title');

// 2. Changez son texte en "Titre Modifié"
title.textContent = 'Titre Modifié';

// 3. Changez sa couleur en bleu
title.style.color = 'blue';

// 4. Augmentez la taille de police à 28px
title.style.fontSize = '28px';

// 5. Sélectionnez tous les éléments avec la classe text
const paragraphs = document.querySelectorAll('.text');
// OugetElementsByClassName (mais retourne une HTMLCollection) :
// const paragraphs = document.getElementsByClassName('text');

// 6. Ajoutez la classe highlight à chaque paragraphe
// Si on utilise querySelectorAll (NodeList) :
paragraphs.forEach((p) => {
    p.classList.add('highlight');
});

// Si on utilise getElementsByClassName (HTMLCollection), il faut convertir en tableau ou utiliser une boucle for classique
// Array.from(paragraphs).forEach(...) ou for(let p of paragraphs) { ... }

---

Exercice 2 : Gestion des Classes et Attributs

/* HTML : <a id="link" href="https://google.com">Google</a> */

const link = document.getElementById('link');

// 1. Vérifiez si le lien a la classe active
if (link.classList.contains('active')) {
    console.log('Le lien a la classe active');
} else {
    console.log("Le lien n'a pas la classe active");
}

// 2. Ajoutez la classe active au lien
link.classList.add('active');

// 3. Vérifiez que la classe a bien été ajoutée (true/false)
console.log(link.classList.contains('active')); // true

// 4. Changez l'attribut href en https://github.com
link.href = 'https://github.com';
// Ou : link.setAttribute('href', 'https://github.com');

// 5. Ajoutez l'attribut target="_blank"
link.target = '_blank';
// Ou : link.setAttribute('target', '_blank');

// 6. Lisez et affichez l'attribut href actuel
console.log(link.href); // https://github.com/
// Note : link.href retourne l'URL absolue, link.getAttribute('href') retourne la valeur exacte de l'attribut

---

Exercice 3 : Créer et Ajouter des Éléments au DOM

const app = document.getElementById('app');

// 1. Créez une <div> avec le texte "Bonjour !"
const newDiv = document.createElement('div');
newDiv.textContent = 'Bonjour !';

// 2. Ajoutez-lui la classe message
newDiv.classList.add('message');

// 3. Créez une liste <ul> avec 3 éléments <li>
const ul = document.createElement('ul');

const items = ['Premier élément', 'Deuxième élément', 'Troisième élément'];

items.forEach((text) => {
    const li = document.createElement('li');
    li.textContent = text;

    // 4. Ajoutez la classe item à chaque <li>
    li.classList.add('item');

    // Ajout du li au ul
    ul.appendChild(li);
});

// 5. Ajoutez la div et la liste au body
// Note : Si on veut ajouter DANS #app comme suggéré par le contexte souvent implicite, on ferait app.appendChild(...)
// Mais la consigne dit "au body" :
document.body.appendChild(newDiv);
document.body.appendChild(ul);

// 6. Affichez le nombre d'éléments <li> dans la console
const liCount = document.querySelectorAll('li').length;
// Si on veut compter seulement ceux qu'on vient de créer dans cette liste spécifique : ul.children.length
console.log(`Nombre d'éléments li : ${liCount}`);

---

Exercice 4 : Événement Click et Compteur

// HTML :
// <button id="counter-btn">Cliquez-moi</button>
// <p id="count">Clics : 0</p>

// 1. Créez une variable clickCount initialisée à 0
let clickCount = 0;

const btn = document.getElementById('counter-btn');
const countDisplay = document.getElementById('count');

// 2. Ajoutez un écouteur click au bouton
btn.addEventListener('click', function () {
    // 3. À chaque clic :
    // Augmentez le compteur
    clickCount++;

    // Affichez le nouveau nombre dans le <p>
    countDisplay.textContent = `Clics : ${clickCount}`;

    // Affichez message console
    console.log(`Bouton cliqué ${clickCount} fois`);

    // 4. Quand le compteur atteint 5
    if (clickCount === 5) {
        btn.style.backgroundColor = 'red';
    }

    // 5. Quand il atteint 10
    if (clickCount === 10) {
        alert('Vous avez cliqué 10 fois !');
    }
});

---

Exercice 5 : Événements de Souris

// 1. Sélectionnez la boîte
const box = document.getElementById('box');
const statusText = document.getElementById('status');

// 2. À l'événement mouseenter
box.addEventListener('mouseenter', () => {
    // Changez la couleur de fond en green
    box.style.backgroundColor = 'green';
    // Modifiez le texte du <p>
    statusText.textContent = 'Vous survolez la boîte !';
});

// 3. À l'événement mouseleave
box.addEventListener('mouseleave', () => {
    // Changez la couleur de fond en blue
    box.style.backgroundColor = 'blue';
    // Modifiez le texte du <p>
    statusText.textContent = 'Vous avez quitté la boîte';
});

// 4. À l'événement click
box.addEventListener('click', (event) => {
    // Affichez les coordonnées dans la console
    console.log(`X: ${event.clientX}, Y: ${event.clientY}`);

    // Affichez aussi un message dans le <p>
    statusText.textContent = `Clic à X: ${event.clientX}, Y: ${event.clientY}`;
});

---

Exercice 6 : Délégation d’Événements

// 1. Récupérez l'élément <ul> avec l'ID list
const list = document.getElementById('list');
const result = document.getElementById('result');
let totalClicks = 0;

// 2. Ajoutez un SEUL écouteur click au <ul>
list.addEventListener('click', function (event) {
    // Vérifier si l'élément cliqué est bien un <li>
    // event.target est l'élément qui a déclenché l'événement
    if (event.target.tagName === 'LI') {
        // BONUS : Gestion du toggle active
        // Si l'élément a déjà la classe active, on le retire et on arrête là (selon interprétation du bonus)
        // Mais la consigne principale est "Retirez la classe active des autres éléments"

        // 3. Logique principale
        // Affichez son texte dans le <p>
        result.textContent = event.target.textContent;

        // Retirez la classe active des autres éléments
        // On peut sélectionner tous les li actuels dans la liste
        const allItems = list.querySelectorAll('li');
        allItems.forEach((item) => item.classList.remove('active'));

        // Ajoutez la classe active à l'élément cliqué
        event.target.classList.add('active');

        // 4. Compteur total de clics
        totalClicks++;
        console.log(`Nombre total de clics : ${totalClicks}`);
    }
});

/* BONUS Variante : Toggle simple sur clic unique sans exclusivité (si c'était la demande)
But "Retirez la classe active des autres éléments" implique une sélection unique (Radio button behavior)
alors que le bonus "Quand on clique sur un élément ayant la classe active, retirez sa classe" ajoute du toggle.
*/