DOM Manipulation Exercises

Débutant

Exercice 1: Sélection et Modification de Texte

Objectif: Sélectionner un élément et changer son contenu textuel.

Cliquez sur le bouton pour changer ce texte!

function exercise1() {
    // Sélectionner l'élément par son ID
    const element = document.getElementById('ex1-text');
    
    // Changer le contenu textuel
    element.textContent = 'Le texte a été changé avec succès!';
    
    // Changer aussi le style
    element.style.color = '#667eea';
    element.style.fontWeight = 'bold';
}

Débutant

Exercice 2: Ajouter et Supprimer des Classes CSS

Objectif: Manipuler les classes CSS d'un élément.

Cliquez pour changer mon apparence!

function exercise2() {
    const box = document.getElementById('ex2-box');
    
    // Ajouter/supprimer des classes
    box.classList.toggle('bg-primary');
    box.classList.toggle('text-white');
    box.classList.toggle('shadow');
}

Intermédiaire

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

Objectif: Créer dynamiquement de nouveaux éléments et les ajouter au DOM.

Les nouveaux éléments apparaîtront ici:

function exercise3() {
    const container = document.getElementById('ex3-container');
    
    // Créer un nouvel élément
    const newElement = document.createElement('div');
    newElement.className = 'alert alert-info mt-2';
    newElement.innerHTML = `
         
        Nouvel élément ajouté à ${new Date().toLocaleTimeString()}
    `;
    
    // Ajouter au conteneur
    container.appendChild(newElement);
}

Intermédiaire

Exercice 4: Gestion des Événements

Objectif: Attacher des écouteurs d'événements et réagir aux interactions utilisateur.

Nombre de clics: 0

let clickCount = 0;

function exercise4() {
    const button = document.getElementById('ex4-btn');
    const counter = document.getElementById('ex4-counter');
    
    // Attacher un écouteur d'événement
    button.addEventListener('click', function() {
        clickCount++;
        counter.textContent = `Nombre de clics: ${clickCount}`;
        
        // Changer la couleur du bouton
        if (clickCount % 2 === 0) {
            button.className = 'btn btn-success';
        } else {
            button.className = 'btn btn-danger';
        }
    });
    
    alert('Événement activé! Cliquez sur le bouton.');
}

Avancé

Exercice 5: Liste Interactive avec Suppression

Objectif: Créer une liste d'éléments avec la possibilité de les supprimer.

function addItem() {
    const input = document.getElementById('ex5-input');
    const list = document.getElementById('ex5-list');
    const text = input.value.trim();
    
    if (text === '') {
        alert('Veuillez entrer un texte!');
        return;
    }
    
    // Créer un nouvel élément de liste
    const li = document.createElement('li');
    li.className = 'list-group-item d-flex justify-content-between align-items-center';
    li.innerHTML = `
        ${text}
        
    `;
    
    // Ajouter à la liste
    list.appendChild(li);
    
    // Réinitialiser l'input
    input.value = '';
}

function removeItem(button) {
    // Supprimer l'élément parent (li)
    button.parentElement.remove();
}