Étape 4 : Filtres et Liste des Tâches (Fin HTML)

Nous terminons la structure HTML en ajoutant les boutons de filtre et le conteneur qui accueillera notre liste de tâches.

1. Les Filtres

Ces boutons permettront à l’utilisateur de n’afficher que certaines tâches (ex: seulement les tâches à faire).

Ajoutez ce code après le formulaire :

<!-- Filtres et Contrôles -->
<div class="controls">
    <div class="filters">
        <button class="filter-btn active" data-filter="toutes">Toutes</button>
        <button class="filter-btn" data-filter="actives">Actives</button>
        <button class="filter-btn" data-filter="terminees">Terminées</button>
        <button class="filter-btn" data-filter="haute">Priorité Haute</button>
    </div>
</div>

Explication

• class="filter-btn active" : Le premier bouton “Toutes” a la classe active par défaut, car au démarrage, on veut tout afficher.
• data-filter="..." : C’est un attribut de données personnalisé (Data Attribute). C’est une astuce très puissante. En JS, nous lirons cette valeur (ex: “terminees”) pour savoir quel filtre appliquer. Cela évite d’avoir à vérifier le texte du bouton.

2. La Liste des Tâches

C’est ici que nos tâches vont apparaître. Pour l’instant, c’est une liste vide.

Ajoutez ce code à la fin, juste avant la fermeture de </div> (l’app-container) :

<!-- Liste des tâches -->
<ul id="task-list" class="task-list">
    <!-- Les tâches seront injectées ici par JS -->
</ul>

Explication

• <ul id="task-list"> : Une liste non ordonnée standard.
• Pourquoi vide ? Parce que nous allons utiliser JavaScript pour créer et insérer les éléments <li> (les tâches) dynamiquement à l’intérieur de cette liste. C’est le principe d’une application dynamique (SPA - Single Page Application concept).

Résumé du fichier HTML complet

À la fin de cette étape, votre index.html est complet !

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TaskMaster Pro</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="app-container">
            <header class="app-header">
                <h1>TaskMaster <span class="accent">Pro</span></h1>
                <p class="subtitle">Gérez vos tâches avec élégance</p>
            </header>

            <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>

            <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">Ajouter</button>
                <!-- SVG simplifié ici pour lisibilité -->
            </form>

            <div class="controls">
                <div class="filters">
                    <button class="filter-btn active" data-filter="toutes">Toutes</button>
                    <button class="filter-btn" data-filter="actives">Actives</button>
                    <button class="filter-btn" data-filter="terminees">Terminées</button>
                    <button class="filter-btn" data-filter="haute">Priorité Haute</button>
                </div>
            </div>

            <ul id="task-list" class="task-list"></ul>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Prochaine étape : Le CSS pour rendre tout cela magnifique !