Convertisseur Ariary, Euro, Dollar

README.md · 2.4 Ko

# Convertisseur Ariary, Euro, Dollar

**Niveau : débutant**

## Cas d'usage

Un voyageur arrive à Antalaha, ou un commerçant reçoit un client étranger : il veut savoir
combien valent 50 € ou 20 $ en Ariary (et l'inverse). Comme le site **n'a pas accès à Internet**,
il ne peut pas connaître le taux du jour : l'utilisateur saisit lui-même les taux
(donnés par sa banque ou son changeur). Les valeurs fournies (1 € = 5 000 Ar, 1 $ = 4 500 Ar)
sont de simples **exemples**.

## Arborescence

```
js-convertisseur/
├── index.html      Structure de la page (formulaires, tableau vide)
├── site.json       Titre, description et mots-clés du site
├── README.md       Ce fichier
├── css/
│   └── style.css   Apparence (mobile d'abord, variables de couleur)
├── js/
│   └── app.js      Tout le comportement, très commenté
└── medias/
    └── antalaha-baie-aube-paysage.svg   Illustration d'en-tête
```

## Notions abordées

- Lire et modifier la page : `getElementById`, `textContent`, `value`, `classList`, `createElement`, `append`
- Événements : `submit`, `click`, `addEventListener`, `preventDefault`
- Fonctions : paramètres, valeur de retour, documentation en commentaire
- Objets : le tableau de taux `{ MGA, EUR, USD }`, copie avec `{ ...objet }`
- Validation de saisie : expression régulière, virgule ou point décimal, refus de zéro
- Formatage : `Intl.NumberFormat("fr-FR", ...)` (espaces, virgule, symbole de la monnaie)
- Devise « pivot » : passer par l'Ariary pour limiter le nombre de taux
- Accessibilité : `label`, `aria-live`, `role="alert"`, `aria-invalid`, focus visible
- Stockage tolérant aux pannes : `localStorage` dans un `try/catch` avec repli en mémoire (obligatoire dans le bac à sable du Portail)

## Idées d'exercices

1. Ajoutez une quatrième devise (par exemple le franc CFA ou la livre sterling) : une option dans chaque liste, un champ de taux, une entrée dans `TAUX_PAR_DEFAUT`.
2. Modifiez la liste `REPERES_ARIARY` pour proposer vos prix habituels.
3. Affichez aussi le taux inverse sous le résultat (« 1 € = … Ar »).
4. Recalculez automatiquement le résultat pendant la frappe (événement `input`) sans bouton.
5. Ajoutez un bouton « Copier le résultat » avec `navigator.clipboard` (pensez au cas où l'accès est refusé).
6. Changez les couleurs en modifiant uniquement les variables au début de `style.css`.