Convertisseur de devises et d'unités : nous faisons le nôtre en une soirée (JS et Python)

🧭 Plan

• Mini-convertisseur de devises en JavaScript (cache des taux + sauvegarde hors ligne).

• Convertisseur d'unités de longueur en JavaScript (sans API - uniquement les coefficients).

• Convertisseur de fichier unique en Python (CLI) pour la pratique « dans le terminal ».

• Petits détails UX, tests et idées de développement.

Objectif : comprendre la logique et assembler un prototype fonctionnel sans frameworks lourds.

💱 Convertisseur de devises (JavaScript, navigateur)

<!-- index.html -->
<div style="max-width:420px;margin:auto;font:16px/1.5 system-ui">
  <h2>Конвертер валют</h2>
  <label>Сумма: <input id="amount" type="number" step="0.01" value="100"></label><br><br>
  <label>Из:
    <select id="from">
      <option>USD</option><option>EUR</option><option>RUB</option>
    </select>
  </label>
  <label>В:
    <select id="to">
      <option>EUR</option><option>USD</option><option>RUB</option>
    </select>
  </label>
  <button id="convert">Перевести</button>
  <p id="out"></p>
</div>

<script>
const cache = { rates: null, ts: 0 };

// Bouchon pour hors ligne : si l'API n'est pas disponible, nous utilisons des cours fictifs
const fallbackRates = { "USD": 1, "EUR": 0.92, "RUB": 92.0 }; // 1 USD = 0.92 EUR, 92 RUB

async function getRates() {
  const now = Date.now();
  if (cache.rates && (now - cache.ts < 10 * 60 * 1000)) return cache.rates;

  try {
    // Remplacez par une véritable API de cours ; important : vérifiez le CORS et le format de réponse.
    // Exemple :
    // const res = await fetch("https://api.example.com/latest?base=USD");
    // const data = await res.json(); const rates = data.rates;
    // Pour la démo, nous utilisons un espace réservé :
    const rates = fallbackRates;
    cache.rates = rates; cache.ts = now; return rates;
  } catch (e) {
    console.warn("API is not available, we use a stub", e);
    return fallbackRates;
  }
}

function formatMoney(value, code) {
  // Mise en forme simple ; pour la production, utilisez Intl.NumberFormat
  return `${value.toFixed(2)} ${code}`;
}

document.getElementById('convert').addEventListener('click', async () => {
  const amount = parseFloat(document.getElementById('amount').value);
  const from = document.getElementById('from').value;
  const to = document.getElementById('to').value;
  const out = document.getElementById('out');

  if (Number.isNaN(amount) || amount < 0) {
    out.textContent = "Please enter a valid amount (≥ 0).";
    return;
  }
  if (from === to) {
    out.textContent = formatMoney(amount, to);
    return;
  }

  const rates = await getRates();
  if (!rates[from] || !rates[to]) {
    out.textContent = "The selected currency is not supported.";
    return;
  }

  // Nous ramenons à la devise de base (USD) puis à la devise cible
  const inUSD = amount / rates[from];     // combien de dollars américains dans le montant initial
  const converted = inUSD * rates[to];    // traduisons dans la langue cible
  out.textContent = formatMoney(converted, to);
});
</script>

Ce qui se passe : nous prenons le nombre, la devise « de », la devise « à », nous tirons les taux de change (de l'API ou de fallbackRates) et convertissons le montant via la devise de base USD : de → USD → à.

• Cache 10 minutes : cache stocke les taux et l'horodatage afin de ne pas spammer l'API et d'accélérer la réponse.

• Mode hors ligne : si le réseau/serveur n'est pas disponible, nous utilisons fallbackRates — la démo fonctionne toujours.

• Validation : on coupe NaN et les montants négatifs, et pour « de=à », on affiche simplement la valeur d'origine.

• Formatage : la fonction formatMoney arrondit à 2 chiffres. Pour la production, prenez Intl.NumberFormat sous la langue locale de l'utilisateur.

💡 Amélioration : ajoutez le recalcul automatique pour l'événement input et enregistrez la sélection de devise dans localStorage.

📏 Convertisseur d'unités (JavaScript, sans API)

<!-- units.html -->
<div style="max-width:420px;margin:auto;font:16px/1.5 system-ui">
  <h2>Конвертер единиц (длина)</h2>
  <label>Значение: <input id="val" type="number" step="0.0001" value="1"></label><br><br>
  <label>Из:
    <select id="uFrom">
      <option>m</option><option>cm</option><option>km</option><option>ft</option><option>in</option>
    </select>
  </label>
  <label>В:
    <select id="uTo">
      <option>cm</option><option>m</option><option>km</option><option>ft</option><option>in</option>
    </select>
  </label>
  <button id="go">Конвертировать</button>
  <p id="res"></p>
</div>

<script>
// coefficient par MÈTRE
const length = {
  m: 1,
  cm: 0.01,
  km: 1000,
  ft: 0.3048,
  in: 0.0254
};

function convert(value, from, to, table) {
  if (!(from in table) || !(to in table)) throw new Error("Unit not supported");
  const base = value * table[from];     // en mètres
  return base / table[to];              // dans l'unité cible
}

document.getElementById('go').addEventListener('click', () => {
  const value = parseFloat(document.getElementById('val').value);
  const from = document.getElementById('uFrom').value;
  const to = document.getElementById('uTo').value;
  const res = document.getElementById('res');

  if (Number.isNaN(value)) { res.textContent = "Enter a number."; return; }
  if (from === to) { res.textContent = `${value} ${to}`; return; }

  const out = convert(value, from, to, length);
  res.textContent = `${out.toFixed(4)} ${to}`;
});
</script>

Idée : une unité « de base » est un mètre. Dans le tableau, chaque unité a un coefficient « combien de mètres dans 1 unité ». Alors la formule est la même : valeur × coefficient De → mètres → / coefficient À.

• Vérification des unités prises en charge : on lance une erreur explicite au lieu de « silencieux » NaN.

• Arrondissement : nous faisons à la toute fin (toFixed(4)), afin de ne pas accumuler d'erreur.

• Extension : les catégories « masse/volume/vitesse » fonctionnent exactement de la même manière ; température - par des formules, et non par des coefficients.

💡 Déplacez les dictionnaires d'unités dans units.js et téléchargez-les en fonction de la catégorie sélectionnée.

🐍 Convertisseur de fichier unique (Python, CLI)

# convert.py
from dataclasses import dataclass

RATES = {"USD": 1.0, "EUR": 0.92, "RUB": 92.0}  # remplacez par des vrais si nécessaire
UNITS_LEN = {"m":1, "cm":0.01, "km":1000, "ft":0.3048, "in":0.0254}

@dataclass
class Result:
  value: float
  unit: str

def convert_currency(amount: float, from_code: str, to_code: str) -> Result:
  if from_code not in RATES or to_code not in RATES:
    raise ValueError("Currency is not supported")
  in_usd = amount / RATES[from_code]
  out = in_usd * RATES[to_code]
  return Result(round(out, 2), to_code)

def convert_length(value: float, from_u: str, to_u: str) -> Result:
  if from_u not in UNITS_LEN or to_u not in UNITS_LEN:
    raise ValueError("Unit not supported")
  base = value * UNITS_LEN[from_u]
  out = base / UNITS_LEN[to_u]
  return Result(round(out, 4), to_u)

def main():
  print("Converter: 1) Currency 2) Length")
  mode = input("Select mode (1/2): ").strip()
  if mode == "1":
    a = float(input("Amount: "))
    fc = input("From currency (USD/EUR/RUB): ").strip().upper()
    tc = input("In currency (USD/EUR/RUB): ").strip().upper()
    res = convert_currency(a, fc, tc)
    print(f"→ {res.value} {res.unit}")
  elif mode == "2":
    v = float(input("Value: "))
    fu = input("From (m/cm/km/ft/in): ").strip()
    tu = input("In (m/cm/km/ft/in): ").strip()
    res = convert_length(v, fu, tu)
    print(f"→ {res.value} {res.unit}")
  else:
    print("Unknown mode")

if __name__ == "__main__":
  main()

Approche : Les fonctions « pures » renvoient Result et n'impriment pas, elles sont faciles à tester. Dans main() seulement entrée/sortie.

• Conversion de devises : le schéma est le même que dans JS : nous convertissons en USD, puis dans la devise cible. Arrondir seulement à la fin.

• Conversion de longueur : utilisons le dictionnaire des coefficients par mètre. La formule reste la même pour toutes les unités.

• Précision de l'argent : si vous avez besoin d'une précision financière, utilisez decimal.Decimal au lieu de float.

💡 Mettre la conversion dans un module séparé et la couvrir de tests unitaires ; laisser la CLI fine.

Les petites choses UX qui rendent la vie plus facile

• Recalcul automatique par événement input (sans bouton).

• Enregistrement de la sélection « de/à » dans localStorage.

• Copie du résultat : navigator.clipboard.writeText.

• Pour les devises — Intl.NumberFormat sous la locale de l'utilisateur.

Tests et râteaux

• Arrondissez à la toute fin ; comparez les nombres avec la tolérance (epsilon).

• Convertissez les températures avec des formules (pas des coefficients).

• Lorsque vous travaillez avec l'API, vérifiez le CORS, les limites, la fréquence de mise à jour.

Dans Codique nous rendons l'apprentissage de la programmation passionnant et compréhensible : nous avons des cours intéressants avec des tâches qui aident à améliorer les compétences étape par étape.

Et nous avons aussi un chaîne de télégram, où nous discutons d'idées intéressantes, partageons nos expériences et analysons ensemble les tâches, apprendre devient non seulement utile, mais aussi amusant.