📘 Chapitre 8 – Créer une interface interactive pilotée par état

1. 🎯 Objectif pédagogique

Apprendre à gérer un état (state) en JavaScript pour mettre à jour dynamiquement l’affichage d’une page, en fonction des actions de l’utilisateur.

2. 📚 Concepts abordés

Notion d’état (données qui définissent l’affichage courant)
Mise à jour du DOM lorsque l’état change
Gestion d’un panier ou d’une liste dynamique
Utilisation d’événements (click) pour modifier l’état
Bonnes pratiques pour séparer les données et l’affichage

3. 🧠 Explication théorique

L’état correspond aux données en mémoire qui décrivent ce que l’interface doit afficher. Lorsqu’un utilisateur effectue une action (ajouter/supprimer un produit), l’état est mis à jour, et l’interface est re-rendue.

Exemple simple :

let compteur = 0;

function afficher() {
  console.log("Compteur : " + compteur);
}

function incrementer() {
  compteur++;
  afficher();
}

incrementer(); // Affiche "Compteur : 1"

Ici, compteur est l’état.

4. 🛠 Tutoriel pratique

Résumé

Nous allons créer un mini-panier d’achats : chaque clic sur un bouton ajoute un produit au panier et met à jour l’affichage.

Arborescence du projet

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Interface pilotée par état</title>
  <style>
    .produit { margin-bottom: 10px; }
    .panier { margin-top: 20px; border-top: 1px solid #ccc; padding-top: 10px; }
  </style>
</head>
<body>
  <h1>Boutique</h1>

  <div class="produit">
    <span>PC Portable – 900 €</span>
    <button data-nom="PC Portable" data-prix="900">Ajouter au panier</button>
  </div>
  <div class="produit">
    <span>Souris – 25 €</span>
    <button data-nom="Souris" data-prix="25">Ajouter au panier</button>
  </div>

  <div class="panier">
    <h2>Panier</h2>
    <ul id="liste-panier"></ul>
    <p id="total">Total : 0 €</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript

let panier = []; // État : tableau des produits
let listePanier = document.getElementById("liste-panier");
let total = document.getElementById("total");

function afficherPanier() {
  listePanier.innerHTML = "";
  let somme = 0;

  panier.forEach(p => {
    let li = document.createElement("li");
    li.textContent = `${p.nom} – ${p.prix} €`;
    listePanier.appendChild(li);
    somme += p.prix;
  });

  total.textContent = `Total : ${somme} €`;
}

let boutons = document.querySelectorAll("button");
boutons.forEach(bouton => {
  bouton.addEventListener("click", function() {
    let produit = {
      nom: this.dataset.nom,
      prix: parseFloat(this.dataset.prix)
    };
    panier.push(produit);
    afficherPanier(); // Mettre à jour l'affichage après ajout
  });
});

Étape 3 : Test

Ouvre index.html et clique sur les boutons pour voir les produits ajoutés et le total mis à jour en temps réel.

5. 🧾 Résumé et points-clés

L’état est la source unique de vérité pour l’affichage.
Toute modification de l’état doit entraîner une mise à jour du DOM.
Cette logique prépare aux frameworks modernes (React, Vue, etc.) qui reposent sur la notion de state.