Étape 10 : JS - Ajouter une Tâche

Nous allons implémenter la fonctionnalité la plus importante : créer une nouvelle tâche.

1. Méthode ajouterTache dans la Classe

Retournez dans votre classe GestionnaireTaches et ajoutez la méthode suivante après le constructor.

class GestionnaireTaches {
    constructor() {
        this.taches = [];
    }

    // Ajouter une tâche
    ajouterTache(titre, priorite) {
        // On crée un objet "tache"
        const nouvelleTache = {
            id: Date.now(), // Astuce : l'heure actuelle en millisecondes sert d'ID unique
            titre: titre,
            priorite: priorite,
            terminee: false, // Par défaut, une nouvelle tâche n'est pas finie
            dateCreation: new Date().toLocaleDateString(), // Date formatée (ex: 12/05/2024)
        };

        // On ajoute cette nouvelle tâche à notre tableau
        // [...this.taches, nouvelleTache] crée un NOUVEAU tableau avec l'ancienne liste + la nouvelle
        // C'est le principe d'immutabilité (très moderne)
        this.taches = [...this.taches, nouvelleTache];

        console.log('Tâche ajoutée :', nouvelleTache); // Pour vérifier
    }
}

2. Gérer le formulaire (Event Listener)

Nous devons maintenant capturer le moment où l’utilisateur clique sur “Ajouter”. Allez tout en bas du fichier, après le bloc statsElements.

// Ajout de tâche
form.addEventListener('submit', (e) => {
    // IMPORTANT : On empêche le rechargement de la page par défaut
    e.preventDefault();

    // On récupère les valeurs tapées par l'utilisateur
    const titre = document.getElementById('task-title').value;
    const priorite = document.getElementById('task-priority').value;

    // Petite sécurité : on vérifie que le titre n'est pas vide (juste des espaces)
    if (titre.trim()) {
        // On appelle notre méthode de classe
        app.ajouterTache(titre, priorite);

        // On vide le champ texte pour que l'utilisateur puisse en ajouter une autre
        document.getElementById('task-title').value = '';
    }
});

---

Test :

1. Rechargez la page.
2. Écrivez “Acheter du pain” et choisissez une priorité.
3. Cliquez sur “Ajouter”.
4. Regardez dans la Console (F12) : vous devriez voir l’objet tâche apparaître avec son ID, son titre, etc. Rien ne change visuellement sur la page pour l’instant, c’est normal ! Nous n’avons pas encore codé l’affichage.