Convertidor de divisas y unidades: hacemos el nuestro por la noche (JS y Python)

🧭 Plan

• Miniconvertidor de divisas en JavaScript (caché de tipos de cambio + fallback sin conexión).

• Convertidor de unidades de longitud en JavaScript (sin API, solo coeficientes).

• Convertidor de archivo único en Python (CLI) para practicar «en la terminal».

• Detalles de UX, pruebas e ideas de desarrollo.

Objetivo: comprender la lógica y construir un prototipo funcional sin marcos pesados.

💱 Convertidor de divisas (JavaScript, navegador)

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

// Marcador de posición sin conexión: si la API no está disponible, usamos tipos de cambio ficticios
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 {
    // Reemplazar con la API real de los cursos; importante: comprobar CORS y el formato de respuesta.
    // Ejemplo:
    // const res = await fetch("https://api.example.com/latest?base=USD");
    // const data = await res.json(); const rates = data.rates;
    // Para la demostración, usamos un marcador de posición:
    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) {
  // Formato simple; para la producción, utilice 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;
  }

  // Convertimos a la moneda base (USD) y luego a la moneda de destino
  const inUSD = amount / rates[from];     // cuánto USD en el importe original
  const converted = inUSD * rates[to];    // traducimos a la lengua de destino
  out.textContent = formatMoney(converted, to);
});
</script>

¿Qué está pasando? tomamos el número, la moneda "de", la moneda "a", cargamos los tipos de cambio (de la API o de fallbackRates) y convertimos la cantidad a través de la moneda base USD: de → USD → a.

• Caché de 10 minutos: cache almacena los tipos de cambio y la marca de tiempo para no enviar spam a la API y acelerar la respuesta.

• Modo sin conexión: si la red/servidor no está disponible, usamos fallbackRates — la demostración siempre funciona.

• Validación: cortamos NaN y cantidades negativas, y en "de=a" simplemente mostramos el valor original.

• Formato: la función formatMoney redondea a 2 caracteres. Para la producción, tome Intl.NumberFormat bajo la configuración regional del usuario.

💡 Mejora: añadir el recálculo automático para el evento input y guardar la selección de moneda en localStorage.

📏 Convertidor de unidades (JavaScript, sin 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>
// coeficientes por METRO
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 metros
  return base / table[to];              // a la unidad de destino
}

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>

Idea: una unidad "base" es un metro. En la tabla, cada unidad tiene un coeficiente de "cuántos metros en 1 unidad". Entonces la fórmula es la misma: valor × coeficiente De → metros → / coeficiente A.

• Comprobación de las unidades compatibles: lanzamos un error explícito en lugar de un NaN «silencioso».

• Redondeo: lo hacemos al final (toFixed(4)) para no acumular errores.

• Extensión: las categorías de «masa/volumen/velocidad» funcionan exactamente igual; temperatura — a través de fórmulas, no de coeficientes.

💡 Ponga los diccionarios de unidades en units.js y cárguelos según la categoría seleccionada.

🐍 Convertidor de un solo archivo (Python, CLI)

# convert.py
from dataclasses import dataclass

RATES = {"USD": 1.0, "EUR": 0.92, "RUB": 92.0}  # reemplazar con datos reales si es necesario
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()

Enfoque: Las funciones "limpias" devuelven Result y no imprimen, son fáciles de probar. En main() solo entrada/salida.

• Conversión de divisas: el esquema es el mismo que en JS: convertimos a USD, luego a la moneda de destino. Redondeamos solo al final.

• Conversión de longitud: usamos el diccionario de coeficientes por metro. La fórmula sigue siendo la misma para todas las unidades.

• Precisión del dinero: si necesita precisión financiera, use decimal.Decimal en lugar de float.

💡 Trasladar la conversión a un módulo separado y cubrirla con pruebas unitarias; dejar la CLI ligera.

Detalles de UX que hacen que sea cómodo

• Recálculo automático por evento input (sin botón).

• Guardar la selección «de/a» en localStorage.

• Copiar el resultado: navigator.clipboard.writeText.

• Para monedas — Intl.NumberFormat bajo la configuración regional del usuario.

Pruebas y rastrillos

• Redondea al final; compara los números con la tolerancia (epsilon).

• Las temperaturas se traducen mediante fórmulas (no coeficientes).

• Al trabajar con la API, compruebe CORS, los límites y la frecuencia de actualización.

En Codice hacemos que el aprendizaje de la programación sea emocionante y comprensible: tenemos cursos interesantes con tareas que ayudan a mejorar las habilidades paso a paso.

Y también tenemos un canal de telegram, donde discutimos ideas geniales, compartimos experiencias y analizamos juntos las tareas: aprender no solo es útil, sino también divertido.