En este artículo, crearemos una aplicación web de conversión de divisas sencilla pero útil utilizando HTML, CSS y JavaScript. Esta aplicación será útil para cualquier persona que viaje o trabaje con transacciones internacionales. Al final del artículo, podrás ejecutar una aplicación de conversión de divisas que funciona directamente en tu navegador. 🎉

✨ Demo del proyecto | 📂 Descargar el código fuente en GitHub

🤖 En la aplicación Kodik ¡Puedes aprender HTML, CSS y JavaScript, así como muchos otros cursos para comenzar tu viaje en el desarrollo web! 🌱

1. Descripción del proyecto ✨

Nuestra aplicación de conversión de divisas permitirá al usuario seleccionar la divisa en la que desea introducir el importe y convertirla a otra divisa al tipo de cambio actual. Utilizaremos una API para obtener los tipos de cambio de divisas actuales. La interfaz de la aplicación será intuitiva y sencilla para que cualquier principiante pueda entenderla fácilmente. 🌐

2. Preparación para el proyecto 🛠️

Para empezar, necesitaremos las siguientes herramientas y recursos:

Editor de texto (por ejemplo, VS Code) para escribir código.
Navegador para probar el funcionamiento de la aplicación.
API para obtener tipos de cambio. Utilizaremos la API gratuita de Exchangerate-API, que le permite recibir datos actualizados sobre los tipos de cambio. Para ello, debe registrarse en el sitio web y obtener una clave API.

Una vez que tengas la clave API, podremos integrarla en nuestro proyecto y usarla para la conversión de divisas. 🚀

3. Pasos de desarrollo 🖥️

Paso 1: Crear HTML

HTML es la base de nuestra aplicación. Con la ayuda de HTML, crearemos una estructura para introducir datos y mostrar el resultado.

Así es como se verá el archivo principal index.html:

<!DOCTYPE html>
<!-- Сделано командой coursme - https://coursme.com/ -->
<html lang="ru" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Приложение для конвертации валют | Coursme</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Ссылка на CDN для иконок FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
  <header>Конвертер валют</header>
  <form action="#">
    <div class="amount">
      <p>Введите сумму</p>
      <input type="text" value="1">
    </div>
    <div class="drop-list">
      <div class="from">
        <p>Из</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/us.png" alt="flag">
          <select> <!-- Опции добавляются через JavaScript --> </select>
        </div>
      </div>
      <div class="icon"><i class="fas fa-exchange-alt"></i></div>
      <div class="to">
        <p>В</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/np.png" alt="flag">
          <select> <!-- Опции добавляются через JavaScript --> </select>
        </div>
      </div>
    </div>
    <div class="exchange-rate">Получение обменного курса...</div>
    <button>Получить обменный курс</button>
  </form>
</div>

<script src="js/country-list.js"></script>
<script src="js/script.js"></script>

</body>
</html>

Paso 2: Estilizar con CSS

Ahora vamos a añadir algunos estilos para que nuestra aplicación se vea limpia y hermosa. Así es como se verá el archivo styles.css:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 10px;
  background: #11152C;
}
::selection{
  color: #fff;
  background: #11152C;
}
.wrapper{
  width: 370px;
  padding: 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper form{
  margin: 40px 0 20px 0;
}
form :where(input, select, button){
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: none;
}
form p{
  font-size: 18px;
  margin-bottom: 5px;
}
form input{
  height: 50px;
  font-size: 17px;
  padding: 0 15px;
  border: 1px solid #999;
}
form input:focus{
  padding: 0 14px;
  border: 2px solid #11152C;
}
form .drop-list{
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.drop-list .select-box{
  display: flex;
  width: 115px;
  height: 45px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}
.select-box img{
  max-width: 21px;
}
.select-box select{
  width: auto;
  font-size: 16px;
  background: none;
  margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar{
  width: 8px;
}
.select-box select::-webkit-scrollbar-track{
  background: #fff;
}
.select-box select::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}
.drop-list .icon{
  cursor: pointer;
  margin-top: 30px;
  font-size: 22px;
}
form .exchange-rate{
  font-size: 17px;
  margin: 20px 0 30px;
}
form button{
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  background: #11152C;
  transition: 0.3s ease;
}
form button:hover{
  background: #11152C;
}

Paso 3: Descripción del código JavaScript

En nuestra aplicación de conversión de divisas JavaScript, realizaremos varias tareas básicas:

Completar las listas desplegables con divisas: Primero, completaremos ambas listas desplegables (fromCurrency y toCurrency) con las monedas disponibles utilizando los datos de moneda proporcionados en el objeto country_list. Este proceso incluye la adición de banderas y códigos de moneda a las listas.
Procesamiento de la selección de divisas: Cuando el usuario selecciona una moneda en una de las listas desplegables, actualizaremos automáticamente la bandera mostrada para cada moneda para reflejar la selección del usuario.
Cambio de divisas con el icono: Para la comodidad del usuario, agregaremos la capacidad de cambiar las monedas en lugares entre los campos "De" y "A" a través del icono de intercambio de divisas. Al hacer clic en el icono, las monedas cambiarán de lugar.
Obtener el tipo de cambio: Al hacer clic en el botón "Obtener tipo de cambio" o al cambiar cualquiera de las monedas, la aplicación enviará una solicitud a una API externa para obtener el tipo de cambio actual entre las monedas seleccionadas. Usaremos la API de Exchangerate-APIpara recibir datos actualizados sobre los tipos de cambio.
Visualización de resultados: Después de recibir el curso, calcularemos el resultado de la conversión del importe introducido a la moneda seleccionada y lo mostraremos en la pantalla. Si algo sale mal (por ejemplo, no hay Internet o la API no responde), mostraremos un error.

Descripción y funcionalidad del código

Completar las listas desplegables: Usaremos el objeto country_list, que contiene los códigos de moneda y los países correspondientes. Con la ayuda de este objeto, completaremos ambas listas desplegables (con monedas para los campos "De" y "A").

for (let i = 0; i < dropList.length; i++) {
    for (let currency_code in country_list) {
        let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : "";
        let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`;
        dropList[i].insertAdjacentHTML("beforeend", optionTag);
    }
}

Aquí revisamos todas las listas desplegables y les añadimos divisas. Por defecto, la moneda USD se seleccionará para el campo "De" y la moneda NPR para el campo "A".

Actualización de la bandera al cambiar de divisa: Cuando el usuario selecciona una moneda, actualizamos la bandera que muestra el país al que pertenece esa moneda. Para ello, utilizamos el método loadFlag, que cambiará la imagen de la bandera en la etiqueta <img>:

function loadFlag(element) {
    for (let code in country_list) {
        if (code == element.value) {
            let imgTag = element.parentElement.querySelector("img");
            imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
        }
    }
}

Cambio de divisas con el icono: El usuario puede intercambiar divisas usando el icono de intercambio. Al hacer clic en este icono, los códigos de moneda en los campos "De" y "A" se intercambian:

const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", () => {
    let tempCode = fromCurrency.value;
    fromCurrency.value = toCurrency.value;
    toCurrency.value = tempCode;
    loadFlag(fromCurrency);
    loadFlag(toCurrency);
    getExchangeRate();
});

Obtener el tipo de cambio: Cuando el usuario hace clic en el botón "Obtener tipo de cambio", o cuando cambia de moneda, hacemos una solicitud a la API para obtener el tipo de cambio actual. La API devuelve el tipo de cambio para las monedas seleccionadas y calculamos el importe total:

function getExchangeRate() {
    const amount = document.querySelector("form input");
    const exchangeRateTxt = document.querySelector("form .exchange-rate");
    let amountVal = amount.value;
    if (amountVal == "" || amountVal == "0") {
        amount.value = "1";
        amountVal = 1;
    }

    const apiKey = 'f2cd93cc5c526e3204de8e90';  // Tu clave API
    exchangeRateTxt.innerText = "Getting the exchange rate...";

    let url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;

    fetch(url).then(response => response.json()).then(result => {
        let exchangeRate = result.conversion_rates[toCurrency.value];
        let totalExRate = (amountVal * exchangeRate).toFixed(2);
        exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
    }).catch(() => {
        exchangeRateTxt.innerText = "Something went wrong";
    });
}

Hacemos una solicitud a la API y utilizamos el tipo de cambio recibido para calcular el importe total. Si se produce un error (por ejemplo, problemas con la conexión a Internet), mostramos un mensaje de error.

Puntos importantes:

Impedir el envío del formulario: Al hacer clic en el botón "Obtener tipo de cambio", evitamos el comportamiento estándar del formulario (recargar la página) con e.preventDefault() para que todo el procesamiento se realice en la misma página.
Validación de entrada: Comprobamos que el usuario no haya introducido 0 o un valor vacío en el campo de importe. Si esto sucede, usamos el valor 1 por defecto.
Clave API: El código utiliza una API externa para obtener los tipos de cambio actuales. Debe obtener su propia clave API registrándose en Exchangerate-APIpara reemplazar la clave actual en el código.
Actualización de la bandera: Actualizamos la imagen de la bandera en la etiqueta <img> dependiendo de la moneda seleccionada, obteniendo el código del país del objeto country_list.

Este enfoque permite crear una aplicación flexible para la conversión de divisas utilizando HTML, CSS y JavaScript, que recibirá datos actualizados de una API externa y proporcionará al usuario una interfaz fácil de usar para la conversión de divisas en tiempo real.

Puedes descargar el código completo en nuestro GitHub

Conclusión ✨

¡Ahora tienes un conversor de divisas que funciona y que utiliza los tipos de cambio actuales de la API! Puedes añadir más divisas o mejorar la interfaz a tu discreción. No olvides que este proyecto es ideal para principiantes, ya que cubre todos los aspectos básicos del desarrollo web: creación de estructuras HTML, estilismo con CSS y trabajo con API utilizando JavaScript. ¡Buena suerte con el desarrollo! 🎯

Para obtener el código fuente completo y posiblemente mejoras adicionales, echa un vistazo a nuestro GitHub.

Si tienes alguna pregunta, no dudes en preguntar. ¡Buena suerte en la programación y que tus proyectos sean siempre tan interesantes y emocionantes! 👊🌟

Aplicación para la conversión de divisas 💰🌍

1. Descripción del proyecto ✨

2. Preparación para el proyecto 🛠️

3. Pasos de desarrollo 🖥️

Paso 1: Crear HTML

Paso 2: Estilizar con CSS

Descripción y funcionalidad del código

Puntos importantes:

Conclusión ✨

¿Te gustó el artículo?
¡Hora de practicar!

Aplicación para la conversión de divisas 💰🌍

1. Descripción del proyecto ✨

2. Preparación para el proyecto 🛠️

3. Pasos de desarrollo 🖥️

Paso 1: Crear HTML

Paso 2: Estilizar con CSS

Descripción y funcionalidad del código

Puntos importantes:

Conclusión ✨

¿Te gustó el artículo?¡Hora de practicar!

¿Te gustó el artículo?
¡Hora de practicar!