Améliorer l'affichage des tâches

Objectifs pédagogiques

• Adapter l'affichage en fonction de l'état d'une tâche.
• Exploiter les données d’un tableau associatif.
• Préparer l'affichage pour la future gestion de statuts.

Exercice pratique

1. Reprendre votre tableau $tasks où chaque tâche est un tableau associatif avec au minimum :
   • label (texte de la tâche)
   • done (valeur booléenne)
2. Modifier l'affichage pour :
   • Montrer une coche verte si la tâche est faite
   • Une croix rouge sinon
3. Ajouter une classe CSS (inline pour l'instant) pour styliser chaque ligne selon son statut

Correction

Visualiser la correction

Exemple de tableau enrichi

<?php

$tasks = [
  [
    'label' => 'Acheter du pain',
    'done' => true
  ],
  [
    'label' => 'Réviser PHP',
    'done' => false
  ],
  [
    'label' => 'Appeler Jean',
    'done' => true
  ]
];
?>

Affichage conditionnel avec styles

<ul>
  <?php foreach ($tasks as $task): ?>
    <li style="color: <?= $task['done'] ? 'green' : 'red' ?>;">
      <?= $task['done'] ? '✅' : '❌' ?>
      <?= htmlspecialchars($task['label']) ?>
    </li>
  <?php endforeach; ?>
</ul>

Explications

• On utilise la clé done pour déterminer le rendu visuel.
• La condition ternaire gère à la fois l'icône et la couleur.
• Le tableau étant associatif, on accède aux données avec des clés explicites.