|
| 1 | +<h1 align="center">Conversor de divisas</h1>💱 |
| 2 | + |
| 3 | +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. |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## Características 🌟 |
| 8 | + |
| 9 | +- **Conversión en tiempo real:** Utiliza una API para obtener tasas de cambio actualizadas. |
| 10 | +- **Interfaz responsiva:** Se adapta a dispositivos móviles y de escritorio. |
| 11 | +- **Diseño moderno:** Implementa Flexbox, transiciones y tipografía elegante (Google Fonts - *Poppins*). |
| 12 | + |
| 13 | +--- |
| 14 | + |
| 15 | +## Estructura 📁 |
| 16 | + |
| 17 | +### HTML |
| 18 | + |
| 19 | +- **Entrada de cantidad:** |
| 20 | + - Campo numérico para ingresar el monto a convertir. |
| 21 | +- **Menús desplegables:** |
| 22 | + - Selección de divisa de origen y destino. |
| 23 | +- **Botón de conversión:** |
| 24 | + - Activa la función de cambio de moneda. |
| 25 | +- **Visualización del resultado:** |
| 26 | + - Muestra el monto convertido en un párrafo. |
| 27 | + |
| 28 | +### CSS |
| 29 | + |
| 30 | +- **Reset global:** |
| 31 | + - Elimina márgenes y paddings por defecto, establece `box-sizing: border-box` y define la fuente *Poppins*. |
| 32 | +- **Diseño responsivo:** |
| 33 | + - Uso de Flexbox para una correcta distribución y alineación de elementos. |
| 34 | +- **Estilos personalizados:** |
| 35 | + - Transiciones de color, imágenes (ícono de la app, flechas en los selectores) y un esquema de colores atractivo. |
| 36 | + |
| 37 | +### JavaScript |
| 38 | + |
| 39 | +- **Lógica de la aplicación:** |
| 40 | + - Captura eventos y realiza la conversión utilizando datos obtenidos de una API. |
| 41 | +- **Población dinámica de selectores:** |
| 42 | + - Itera sobre un array de códigos de divisas (definido en `currency-codes.js`) para generar las opciones. |
| 43 | +- **Validación y manejo de eventos:** |
| 44 | + - Verifica la entrada de datos y actualiza la interfaz al clic en el botón "Convertir". |
| 45 | +- **Integración con API:** |
| 46 | + - Usa la clave API de `api-key.js` para obtener tasas de cambio en tiempo real. |
| 47 | + |
| 48 | +--- |
| 49 | + |
| 50 | +## Detalles técnicos 🔍 |
| 51 | + |
| 52 | +### Código HTML |
| 53 | + |
| 54 | +- **Estructura y metadatos:** |
| 55 | + - Inicio con `<!DOCTYPE html>` y `<html lang="es">`. |
| 56 | + - `<head>` incluye meta viewport, título, Google Fonts y enlace al CSS. |
| 57 | +- **Cuerpo (`<body>`):** |
| 58 | + - Contenedor principal (`.wrapper`) que centraliza y limita el ancho del contenido. |
| 59 | + - Sección `.app-details` con el ícono y título de la aplicación. |
| 60 | + - Formulario interactivo: campo de entrada, menús desplegables, botón de conversión y área para mostrar resultados. |
| 61 | +- **Inclusión de scripts:** |
| 62 | + - Se cargan `currency-codes.js`, `api-key.js` y `script.js` para habilitar la funcionalidad. |
| 63 | + |
| 64 | +### Código JavaScript |
| 65 | + |
| 66 | +- **Selección y manipulación del DOM:** |
| 67 | + - Uso de `document.getElementById` para acceder a elementos HTML. |
| 68 | +- **Población dinámica de selectores:** |
| 69 | + - Utiliza `forEach` para crear elementos `<option>` a partir de un array de códigos de divisas. |
| 70 | +- **Función de conversión:** |
| 71 | + - Valida la entrada, realiza una solicitud `fetch` a la API y actualiza el resultado. |
| 72 | +- **Eventos:** |
| 73 | + - Listener para el clic en el botón "Convertir" y ejecución automática al cargar la página. |
| 74 | + |
| 75 | +### Código CSS |
| 76 | + |
| 77 | +- **Estilos globales:** |
| 78 | + - Reset de márgenes, paddings, y definición de la fuente. |
| 79 | +- **Diseño del contenedor:** |
| 80 | + - Uso de `position: absolute` y `transform: translate(-50%, -50%)` para centrar el contenido. |
| 81 | +- **Estilos de componentes:** |
| 82 | + - Personalización de inputs, selectores y botones con transiciones y colores contrastantes. |
| 83 | +- **Visualización del resultado:** |
| 84 | + - Párrafo estilizado para resaltar el monto convertido con colores y tipografía centrada. |
| 85 | + |
| 86 | +--- |
| 87 | + |
| 88 | +## ¿Cómo ejecutar la aplicación? 🚀 |
| 89 | + |
| 90 | +1. **Clona el repositorio:** |
| 91 | + ```bash |
| 92 | + git clone https://github.com/ot-code/challenge-oracle-currency-converter.github.io.git |
| 93 | + |
| 94 | +2. **Abre el archivo index.html en tu navegador. |
| 95 | +3. **Ingresa la cantidad a convertir y selecciona las divisas deseadas. |
| 96 | +4. **Haz clic en "Convertir" para ver el resultado actualizado en tiempo real. |
| 97 | + |
| 98 | +--- |
| 99 | + |
| 100 | +## Imágenes de la aplicación |
| 101 | +<div align="center"> |
| 102 | + <img src="https://github.com/user-attachments/assets/0ae25fff-8a70-4462-b203-c7dedc857d00" alt="Conversor de divisas por defecto" width="700" height="600" /> |
| 103 | + <img src="https://github.com/user-attachments/assets/06096e18-6ec0-4328-823d-5d0d08168627" alt="Conversor de divisas en acción" width="700" height="600" /> |
| 104 | +</div> |
| 105 | + |
| 106 | +--- |
| 107 | + |
| 108 | +<p align="center"> |
| 109 | + <big><strong>¡Gracias por visitar este repositorio!✨💱</strong></big> |
| 110 | +</p> |
0 commit comments