Carnet de caisse du marché d'Antalaha

README.md · 2.8 Ko

# Carnet de caisse du marché d'Antalaha

**Niveau : intermédiaire**

## Cas d'usage

Une marchande de vanille, de girofle ou de litchis note ses ventes au fil de la journée sur son téléphone :
produit, quantité, prix unitaire. Le carnet calcule le **total du jour**, regroupe les ventes **par produit**,
permet d'en supprimer une en cas d'erreur, et produit un **texte à copier** (pour l'envoyer à la famille ou à un comptable).
Les données sont gardées dans le navigateur quand c'est possible ; sinon elles restent en mémoire et le site
le dit clairement (c'est le cas dans le bac à sable du Portail). Pour changer de jour, utilisez « Vider le carnet ».

## Arborescence

```
js-caisse-marche/
├── index.html        Structure : formulaire, tableaux vides, zone d'export
├── site.json         Titre, description, mots-clés
├── README.md         Ce fichier
├── css/
│   └── style.css     Apparence mobile d'abord (variables, tableaux, boutons)
├── js/
│   ├── stockage.js   Objet global Stockage : localStorage protégé + repli en mémoire (chargé en premier)
│   └── app.js        Données, calculs, affichage, actions, événements
└── medias/
    └── antalaha-vanille-paysage.svg   Illustration d'en-tête
```

## Notions abordées

- Tableaux d'objets : `push`, `find`, `forEach`
- `map`, `filter`, `reduce` : transformer, sélectionner, additionner/regrouper
- Regroupement par clé avec `reduce` et un objet, puis `Object.values` et `sort`
- Une seule source de vérité (le tableau `ventes`) et une fonction `toutAfficher()` qui redessine l'écran
- Délégation d'événements : un seul écouteur sur le `<tbody>`, `event.target.closest()`, attributs `data-*` (`dataset`)
- Création d'éléments avec `createElement` et `textContent` (sans injecter de HTML)
- Validation de formulaire et messages d'erreur clairs, focus replacé sur le champ fautif
- `JSON.stringify` / `JSON.parse` et vérification de données relues
- Sauvegarde robuste : `try/catch` autour de `localStorage`, repli en mémoire, IIFE pour garder des variables privées
- Presse-papiers : `navigator.clipboard` avec plan B (sélection du texte)
- `Intl.NumberFormat` et `toLocaleDateString` en français
- Accessibilité : `label`, `aria-live`, `role="status"`, `aria-label` sur les boutons

## Idées d'exercices

1. Ajoutez un bouton « Modifier » qui recharge une vente dans le formulaire.
2. Ajoutez une colonne « Mode de paiement » (espèces / mobile money) et un total par mode.
3. Affichez le produit le plus vendu en le repérant avec `reduce` ou `sort`.
4. Enregistrez la date de chaque vente et n'affichez que celles d'aujourd'hui avec `filter`.
5. Ajoutez un bouton « Annuler la dernière vente » avec `pop()`.
6. Ajoutez un téléchargement du texte d'export en fichier `.txt` (objet `Blob` + lien `download`).