Étape 11 : JS - Afficher les Tâches (Rendu)

Maintenant que nos données sont stockées dans app.taches, il faut les transformer en HTML pour que l’utilisateur les voie.

1. Fonction escapeHtml (Sécurité)

Avant d’afficher du texte utilisateur, il faut se protéger contre les failles XSS (injection de code malveillant). Si un utilisateur nomme sa tâche <script>alert('boum')</script>, on ne veut pas que ça s’exécute !

Ajoutez cette petite fonction utilitaire à la toute fin du fichier :

// Sécurité XSS simple
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

2. Fonction afficherTaches

Voici la fonction qui va tout dessiner. Elle prend la liste des tâches et génère le HTML correspondant.

Ajoutez cette fonction avant les Event Listeners (ou à la fin, peu importe, mais c’est mieux de grouper les fonctions).

// Fonction d'affichage
function afficherTaches() {
    // 1. On vide la liste actuelle pour tout redessiner proprement
    listElement.innerHTML = '';

    // 2. On parcourt toutes les tâches pour créer le HTML
    app.taches.forEach((tache) => {
        // Création de l'élément <li>
        const li = document.createElement('li');
        // On ajoute les classes CSS. Si terminée, on ajoute la classe 'completed'
        li.className = `task-item ${tache.terminee ? 'completed' : ''}`;

        // Contenu HTML de la tâche (Template String ``)
        li.innerHTML = `
            <div class="checkbox-wrapper">
                <input type="checkbox" class="task-checkbox" 
                    ${tache.terminee ? 'checked' : ''} 
                    onchange="toggleTache(${tache.id})">
            </div>
            <div class="task-content">
                <div class="task-title">${escapeHtml(tache.titre)}</div>
                <div class="task-meta">
                    <span class="badge badge-${tache.priorite}">${tache.priorite}</span>
                    <span>• ${tache.dateCreation}</span>
                </div>
            </div>
            <button class="btn-delete" onclick="supprimerTache(${tache.id})" title="Supprimer">
                <!-- Icône poubelle SVG -->
                <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
            </button>
        `;

        // On ajoute ce <li> à la liste principale <ul>
        listElement.appendChild(li);
    });
}

3. Connecter l’affichage

Maintenant, il faut appeler cette fonction afficherTaches() à chaque fois que les données changent.

Modifiez votre Event Listener “submit” (étape précédente) pour ajouter afficherTaches() à la fin :

form.addEventListener('submit', (e) => {
    // ...
    if (titre.trim()) {
        app.ajouterTache(titre, priorite);
        document.getElementById('task-title').value = '';

        // AJOUTER ICI :
        afficherTaches();
    }
});

---

Test : Essayez d’ajouter une tâche maintenant. Magie ! Elle apparaît immédiatement dans la liste. Mais les boutons checkbox et supprimer ne marchent pas encore (erreur console “toggleTache is not defined”). C’est l’étape suivante.