Währungs- und Einheitenrechner: Wir erstellen unseren eigenen über Nacht (JS und Python)

🧭 Plan

• Mini-Währungsumrechner in JavaScript (Kurs-Cache + Offline-Fallback).

• Einheitenumrechner für Länge in JavaScript (ohne API - nur Koeffizienten).

• Einzeldatei-Konverter in Python (CLI) für die Übung „im Terminal“.

• UX-Kleinigkeiten, Tests und Entwicklungsideen.

Ziel: die Logik verstehen und einen funktionierenden Prototyp ohne schwerfällige Frameworks erstellen.

💱 Währungsrechner (JavaScript, Browser)

<!-- 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 };

// Offline-Platzhalter: Wenn die API nicht verfügbar ist, verwenden wir fiktive Kurse
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 {
    // Ersetzen Sie durch eine echte Kurs-API; wichtig: Überprüfen Sie CORS und das Antwortformat.
    // Beispiel:
    // const res = await fetch("https://api.example.com/latest?base=USD");
    // const data = await res.json(); const rates = data.rates;
    // Für die Demo verwenden wir einen Platzhalter:
    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) {
  // Einfache Formatierung; Verwenden Sie Intl.NumberFormat für die Produktion
  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;
  }

  // Wir rechnen in die Basiswährung (USD) und dann in die Zielwährung um
  const inUSD = amount / rates[from];     // wie viel USD im ursprünglichen Betrag
  const converted = inUSD * rates[to];    // Übersetzen in die Zielsprache
  out.textContent = formatMoney(converted, to);
});
</script>

Was passiert: Wir nehmen die Zahl, die Währung "von", die Währung "in", ziehen die Kurse (aus der API oder aus fallbackRates) und rechnen den Betrag über die Basiswährung USD um: von → USD → nach.

• 10 Minuten Cache: cache speichert Kurse und Zeitstempel, um die API nicht zu spammen und die Antwort zu beschleunigen.

• Offline-Modus: Wenn das Netzwerk/der Server nicht verfügbar ist, verwenden Sie fallbackRates — die Demo funktioniert immer.

• Validierung: wir schneiden NaN und negative Beträge ab, und bei "von=zu" zeigen wir einfach den ursprünglichen Wert an.

• Formatierung: Die Funktion formatMoney rundet auf 2 Zeichen. Für die Produktion nehmen Sie Intl.NumberFormat unter dem Benutzer-Lokal.

💡 Verbesserung: Fügen Sie die automatische Neuberechnung für das Ereignis input hinzu und speichern Sie die Währungsauswahl in localStorage.

📏 Einheitenrechner (JavaScript, ohne 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>
// Koeffizienten pro METER
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];     // in Metern
  return base / table[to];              // in die Zieleinheit
}

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>

Idee: eine „Basiseinheit“ ist ein Meter. In der Tabelle hat jede Einheit einen Koeffizienten "wie viele Meter in 1 Einheit". Dann ist die Formel die gleiche: Wert × Faktor Von → Meter → / Faktor Bis.

• Überprüfung der unterstützten Einheiten: Wir werfen einen expliziten Fehler anstelle von "leise" NaN.

• Rundung: wir machen am Ende (toFixed(4)), um keine Fehler zu sammeln.

• Erweiterung: Die Kategorien „Masse/Volumen/Geschwindigkeit“ funktionieren genauso; Temperatur - durch Formeln, nicht durch Koeffizienten.

💡 Platzieren Sie die Wörterbücher der Einheiten in units.js und laden Sie sie unter der ausgewählten Kategorie.

🐍 Ein-Datei-Konverter (Python, CLI)

# convert.py
from dataclasses import dataclass

RATES = {"USD": 1.0, "EUR": 0.92, "RUB": 92.0}  # ggf. durch echte ersetzen
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()

Ansatz: "Reine" Funktionen geben Result zurück und drucken nicht - sie sind einfach zu testen. In main() nur Ein-/Ausgabe.

• Währungsumrechnung: Das Schema ist das gleiche wie in JS: wir rechnen in USD um, dann in die Zielwährung. Wir runden ab nur am Ende.

• Längenkonvertierung: Wir verwenden das Wörterbuch der Koeffizienten pro Meter. Die Formel bleibt für alle Einheiten gleich.

• Geldgenauigkeit: wenn Sie finanzielle Genauigkeit benötigen, verwenden Sie decimal.Decimal anstelle von float.

💡 Verschieben Sie die Konvertierung in ein separates Modul und decken Sie es mit Unit-Tests ab; CLI dünn lassen.

UX-Kleinigkeiten, die es bequem machen

• Automatische Neuberechnung nach Ereignis input (ohne Schaltfläche).

• Speichern der Auswahl „von/nach“ in localStorage.

• Ergebnis kopieren: navigator.clipboard.writeText.

• Für Währungen - Intl.NumberFormat unter dem Benutzer-Lokal.

Tests und Rechen

• Runden Sie am Ende ab; vergleichen Sie die Zahlen mit der Toleranz (epsilon).

• Übertragen Sie die Temperaturen mit Formeln (nicht mit Koeffizienten).

• Überprüfen Sie bei der Arbeit mit der API CORS, Limits und Aktualisierungsrate.

In Kodike Wir machen das Programmierenlernen spannend und verständlich: Wir haben interessante Kurse mit Aufgaben, die helfen, die Fähigkeiten Schritt für Schritt zu verbessern.

Und wir haben auch einen aktiven Telegram-Kanal, wo wir coole Ideen diskutieren, Erfahrungen teilen und Aufgaben gemeinsam analysieren — Lernen wird nicht nur nützlich, sondern auch unterhaltsam.