Este proyecto es una aplicación web interactiva desarrollada con HTML, CSS y JavaScript. Su propósito es facilitar la conversión de montos entre diversas divisas en tiempo real, ofreciendo una experiencia de usuario fluida y atractiva.
- Conversión en tiempo real: Utiliza una API para obtener tasas de cambio actualizadas.
- Interfaz responsiva: Se adapta a dispositivos móviles y de escritorio.
- Diseño moderno: Implementa Flexbox, transiciones y tipografía elegante (Google Fonts - Poppins).
- Entrada de cantidad:
- Campo numérico para ingresar el monto a convertir.
- Menús desplegables:
- Selección de divisa de origen y destino.
- Botón de conversión:
- Activa la función de cambio de moneda.
- Visualización del resultado:
- Muestra el monto convertido en un párrafo.
- Reset global:
- Elimina márgenes y paddings por defecto, establece
box-sizing: border-boxy define la fuente Poppins.
- Elimina márgenes y paddings por defecto, establece
- Diseño responsivo:
- Uso de Flexbox para una correcta distribución y alineación de elementos.
- Estilos personalizados:
- Transiciones de color, imágenes (ícono de la app, flechas en los selectores) y un esquema de colores atractivo.
- Lógica de la aplicación:
- Captura eventos y realiza la conversión utilizando datos obtenidos de una API.
- Población dinámica de selectores:
- Itera sobre un array de códigos de divisas (definido en
currency-codes.js) para generar las opciones.
- Itera sobre un array de códigos de divisas (definido en
- Validación y manejo de eventos:
- Verifica la entrada de datos y actualiza la interfaz al clic en el botón "Convertir".
- Integración con API:
- Usa la clave API de
api-key.jspara obtener tasas de cambio en tiempo real.
- Usa la clave API de
- Estructura y metadatos:
- Inicio con
<!DOCTYPE html>y<html lang="es">. <head>incluye meta viewport, título, Google Fonts y enlace al CSS.
- Inicio con
- Cuerpo (
<body>):- Contenedor principal (
.wrapper) que centraliza y limita el ancho del contenido. - Sección
.app-detailscon el ícono y título de la aplicación. - Formulario interactivo: campo de entrada, menús desplegables, botón de conversión y área para mostrar resultados.
- Contenedor principal (
- Inclusión de scripts:
- Se cargan
currency-codes.js,api-key.jsyscript.jspara habilitar la funcionalidad.
- Se cargan
- Selección y manipulación del DOM:
- Uso de
document.getElementByIdpara acceder a elementos HTML.
- Uso de
- Población dinámica de selectores:
- Utiliza
forEachpara crear elementos<option>a partir de un array de códigos de divisas.
- Utiliza
- Función de conversión:
- Valida la entrada, realiza una solicitud
fetcha la API y actualiza el resultado.
- Valida la entrada, realiza una solicitud
- Eventos:
- Listener para el clic en el botón "Convertir" y ejecución automática al cargar la página.
- Estilos globales:
- Reset de márgenes, paddings, y definición de la fuente.
- Diseño del contenedor:
- Uso de
position: absoluteytransform: translate(-50%, -50%)para centrar el contenido.
- Uso de
- Estilos de componentes:
- Personalización de inputs, selectores y botones con transiciones y colores contrastantes.
- Visualización del resultado:
- Párrafo estilizado para resaltar el monto convertido con colores y tipografía centrada.
- Clona el repositorio:
git clone https://github.com/ot-code/challenge-oracle-currency-converter.github.io.git
- **Abre el archivo index.html en tu navegador.
- **Ingresa la cantidad a convertir y selecciona las divisas deseadas.
- **Haz clic en "Convertir" para ver el resultado actualizado en tiempo real.
¡Gracias por visitar este repositorio!✨💱