Étape 3 : Zone de Statistiques et Formulaire d’ajout

Cette étape est cruciale car elle ajoute deux fonctionnalités majeures : la visualisation de l’état des tâches et la possibilité d’en créer de nouvelles.

1. Zone de Statistiques

Nous voulons afficher 3 compteurs : Total, Actives, et Terminées. Copiez ce code à la suite du <header>, toujours dans .app-container :

<!-- Zone de statistiques -->
<div class="stats-container">
    <div class="stat-card">
        <span class="stat-value" id="total-tasks">0</span>
        <span class="stat-label">Total</span>
    </div>
    <div class="stat-card active">
        <span class="stat-value" id="active-tasks">0</span>
        <span class="stat-label">Actives</span>
    </div>
    <div class="stat-card completed">
        <span class="stat-value" id="completed-tasks">0</span>
        <span class="stat-label">Terminées</span>
    </div>
</div>

Explication

• Chaque compteur est une div indépendante (stat-card).
• Important : Les nombres ont des ID spécifiques (id="total-tasks", id="active-tasks", etc.). C’est grâce à ces ID que notre JavaScript pourra trouver ces éléments plus tard et mettre à jour les chiffres dynamiquement.

2. Formulaire d’Ajout de Tâche

Nous avons besoin d’un champ texte pour le titre de la tâche et d’un menu déroulant pour la priorité.

Ajoutez ce code à la suite des statistiques :

<!-- Formulaire d'ajout -->
<form id="task-form" class="task-form">
    <div class="input-group">
        <input type="text" id="task-title" placeholder="Nouvelle tâche..." required autocomplete="off" />
    </div>
    <div class="select-wrapper">
        <select id="task-priority">
            <option value="haute">Haute</option>
            <option value="normale" selected>Normale</option>
            <option value="basse">Basse</option>
        </select>
    </div>
    <button type="submit" class="btn-primary">
        <!-- Icône SVG pour le bouton Ajouter -->
        <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        Ajouter
    </button>
</form>

Explication

• <form id="task-form"> : L’utilisation d’une balise <form> nous permet de bénéficier de la gestion native de la soumission (touche Entrée pour valider).
• <input ... required> : L’attribut required empêche l’utilisateur d’ajouter une tâche vide sans écrire une seule ligne de JS.
• <select id="task-priority"> : Permet de choisir la priorité. “Normale” est sélectionnée par défaut (selected).
• Inside <button>, nous avons inclus un code <svg>. C’est une image vectorielle qui dessine un petit “plus” (+), pour rendre le bouton plus visuel et moderne qu’un simple texte “+”.

---

Note : Sans CSS, tout cela s’affiche les uns sous les autres de manière très brute. C’est normal ! Nous styliserons tout cela bientôt.