Que dois-je tester manuellement dans le navigateur ?

Vous devez tester l'ajout et la suppression de produits, la diminution de la quantité, la mise à jour du total, le dépassement de stock avec un message d'erreur, et la restauration des données après avoir rechargé la page.

Comment ajouter un bouton pour vider le panier ?

Ajoutez la méthode viderPanier() dans votre classe Panier, puis placez un bouton HTML sous la zone souhaitée avec l'attribut onclick="monPanier.viderPanier()".

Comment réinitialiser le localStorage ?

Pour réinitialiser le localStorage, tapez localStorage.removeItem("monPanier") dans la console, ou créez un bouton HTML exécutant cette commande si nécessaire.

Quelle structure de fichiers est recommandée pour le projet ?

Organisez votre projet avec les fichiers suivants : /panier/ contenant index.html, style.css, panier.ts, panier.js, et README.md.

Finaliser votre panier TypeScript

OUJOOD.COM

🧪 1. Vérification des fonctionnalités

Voici ce que vous devez tester manuellement dans le navigateur :

➕ Ajouter un produit via le formulaire
➖ Diminuer la quantité jusqu’à 1
❌ Supprimer un article avec confirmation
💶 Vérifier que le total s’actualise
📛 Test de dépassement de stock = message d’erreur
🔁 Recharger la page : les données sont restaurées

🧹 2. Ajouter un bouton pour vider le panier

Ajoutez cette méthode dans votre classe Panier :

📋 Copier le code

viderPanier() {
  if (!confirm("Souhaitez-vous vraiment vider tout le panier ?")) return;
  this.elements = [];
  this.sauvegarder();
  this.actualiserAffichage();
}

Puis ajoutez ce bouton dans le HTML :

📋 Copier le code

<button onclick="monPanier.viderPanier()">🧹 Vider le panier</button>

📍 Placez-le sous la zone d’affichage du total.

🔄 3. Réinitialiser le localStorage (si besoin)

Si vous avez besoin de repartir de zéro, tapez ceci dans la console :

📋 Copier le code

localStorage.removeItem("monPanier");

Vous pouvez aussi créer un bouton HTML qui exécute cette commande si besoin.

📁 4. Structure de fichiers recommandée

Voici une organisation propre pour mettre votre projet en ligne :

📋 Copier le code

/panier/
├── index.html        → Interface principale
├── style.css         → CSS externe (optionnel)
├── panier.ts         → Classe TypeScript
├── panier.js         → Version compilée
├── README.md         → Instructions