Convertisseur Ariary, Euro, Dollar

index.html · 5.8 Ko

<!DOCTYPE html>
<!--
  ============================================================
  Fichier : index.html
  Rôle    : structure (le « squelette ») du convertisseur de monnaie.
  Dépend de : css/style.css (apparence) et js/app.js (comportement).
  ------------------------------------------------------------
  Règle d'or : le HTML décrit CE QUE LA PAGE CONTIENT,
  le CSS décrit COMMENT ELLE SE VOIT,
  le JavaScript décrit CE QU'ELLE FAIT.
  ============================================================
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <!-- Indispensable sur téléphone : la page prend la largeur de l'écran -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Convertisseur Ariary, Euro, Dollar</title>
  <!-- Chemin RELATIF (sans « / » au début) : le site est servi dans un sous-dossier -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header class="entete">
    <!-- Image décorative : alt="" dit aux lecteurs d'écran de l'ignorer -->
    <img class="entete__image" src="medias/antalaha-baie-aube-paysage.svg" alt="">
    <div class="entete__texte">
      <h1>Convertisseur de monnaie</h1>
      <p>Ariary (Ar), Euro (€) et Dollar ($)</p>
    </div>
  </header>

  <main class="page">

    <!-- ===== Section 1 : la conversion ===== -->
    <section class="carte" aria-labelledby="titre-conversion">
      <h2 id="titre-conversion">Convertir un montant</h2>

      <!-- novalidate : c'est NOTRE JavaScript qui valide, pour afficher nos messages en français -->
      <form id="formulaire-conversion" novalidate>

        <div class="champ">
          <label for="montant">Montant</label>
          <!-- type="text" + inputmode="decimal" : clavier numérique sur mobile, mais on accepte aussi la virgule -->
          <input id="montant" name="montant" type="text" inputmode="decimal"
                 autocomplete="off" placeholder="Exemple : 25 000"
                 aria-describedby="erreur-montant">
          <!-- role="alert" : le message est lu à voix haute dès qu'il apparaît -->
          <p id="erreur-montant" class="erreur" role="alert"></p>
        </div>

        <div class="ligne-devises">
          <div class="champ">
            <label for="devise-source">De</label>
            <select id="devise-source" name="source">
              <option value="MGA">Ariary (Ar)</option>
              <option value="EUR">Euro (€)</option>
              <option value="USD">Dollar ($)</option>
            </select>
          </div>

          <!-- Bouton qui échange les deux devises -->
          <button type="button" id="bouton-inverser" class="bouton bouton--discret"
                  aria-label="Inverser les deux devises" title="Inverser">⇄</button>

          <div class="champ">
            <label for="devise-cible">Vers</label>
            <select id="devise-cible" name="cible">
              <option value="MGA">Ariary (Ar)</option>
              <option value="EUR" selected>Euro (€)</option>
              <option value="USD">Dollar ($)</option>
            </select>
          </div>
        </div>

        <button type="submit" class="bouton">Convertir</button>
      </form>

      <!-- aria-live="polite" : un lecteur d'écran annonce le nouveau résultat -->
      <div id="resultat" class="resultat" aria-live="polite">
        Saisissez un montant puis appuyez sur « Convertir ».
      </div>
    </section>

    <!-- ===== Section 2 : les taux ===== -->
    <section class="carte" aria-labelledby="titre-taux">
      <h2 id="titre-taux">Les taux de change</h2>
      <p class="aide">
        Ce site <strong>n'a pas accès à Internet</strong> : il ne peut pas connaître le taux du jour.
        Les valeurs ci-dessous sont des <strong>exemples</strong>. Demandez le taux à votre
        banque ou à votre changeur, puis modifiez-le ici : tous les calculs en tiennent compte.
      </p>

      <form id="formulaire-taux" novalidate>
        <div class="champ">
          <label for="taux-eur">1 Euro (€) vaut combien d'Ariary ?</label>
          <input id="taux-eur" type="text" inputmode="decimal" autocomplete="off"
                 aria-describedby="erreur-taux">
        </div>
        <div class="champ">
          <label for="taux-usd">1 Dollar ($) vaut combien d'Ariary ?</label>
          <input id="taux-usd" type="text" inputmode="decimal" autocomplete="off"
                 aria-describedby="erreur-taux">
        </div>
        <p id="erreur-taux" class="erreur" role="alert"></p>

        <div class="boutons">
          <button type="submit" class="bouton">Enregistrer les taux</button>
          <button type="button" id="bouton-reinitialiser" class="bouton bouton--discret">Valeurs d'exemple</button>
        </div>
      </form>
    </section>

    <!-- ===== Section 3 : tableau de référence (rempli par JavaScript) ===== -->
    <section class="carte" aria-labelledby="titre-tableau">
      <h2 id="titre-tableau">Repères rapides</h2>
      <p class="aide">Ce tableau est construit par JavaScript à partir des taux ci-dessus.</p>
      <div class="tableau-defilant">
        <table>
          <caption class="sr-only">Équivalences de quelques montants en Ariary</caption>
          <thead>
            <tr><th scope="col">Ariary</th><th scope="col">Euro</th><th scope="col">Dollar</th></tr>
          </thead>
          <!-- Les lignes seront ajoutées ici par la fonction afficherReperes() -->
          <tbody id="corps-reperes"></tbody>
        </table>
      </div>
    </section>

  </main>

  <footer class="pied">
    <p>Site pédagogique du Portail Antalaha – code ouvert : lisez <code>js/app.js</code> pour comprendre.</p>
  </footer>

  <!-- Le script est chargé EN DERNIER : ainsi tous les éléments ci-dessus existent déjà
       quand le JavaScript cherche à les retrouver avec getElementById. -->
  <script src="js/app.js"></script>
</body>
</html>