Calculateur de prix de vanille (Alpine.js)

README.md · 1.8 Ko

# Calculateur de prix de vanille (Alpine.js, niveau débutant)

## Cas d'usage
Un vendeur de vanille d'Antalaha veut donner rapidement un prix à ses clients : on choisit la qualité des gousses, le poids en grammes, la zone de livraison, des options (client fidèle, emballage cadeau) et la page affiche le détail et le total en Ariary. Les prix sont fictifs.

## Arborescence
```
alpine-prix-vanille/
├── index.html            page unique, avec un commentaire sur chaque attribut Alpine
├── css/style.css         apparence (mobile d'abord, variables CSS, x-cloak)
├── js/calculateur.js     la fonction calculateur() : état, getters, méthodes
├── medias/               illustration d'en-tête (SVG libre de droits)
├── site.json             titre, description, étiquettes
└── README.md             ce fichier
```

## Notions Alpine abordées
- `x-data` avec une fonction qui retourne un objet
- `x-model` et le modificateur `.number`
- les getters (`get total() {…}`) pour les valeurs calculées
- `x-text` pour afficher une valeur
- `x-show` pour afficher/masquer, et `x-cloak` contre le « flash » au chargement
- `@click` (`x-on:click`) pour appeler une méthode
- `:class`, `:value`, `:aria-*` (`x-bind`)
- `x-for` + `:key` sur un `<template>` (listes déroulantes)

## Pièges de l'environnement
- `localStorage` n'est pas utilisé (bac à sable) ; aucune ressource externe.
- `js/calculateur.js` est chargé avant `alpine.min.js` (tous deux `defer`).

## Idées d'exercices
1. Ajouter une qualité « Vanille bourbon bio » à 1 100 Ar/g.
2. Ajouter un champ « code promo » : si le texte vaut `ANTALAHA`, −3 % supplémentaires.
3. Afficher le prix pour 100 g à côté du total (nouveau getter).
4. Ajouter un sélecteur de monnaie (Ariary / euro, taux saisi à la main).
5. Afficher un avertissement si le total dépasse 5 000 000 Ar.