💶💷 Conversor de Divisas 💵💴

Este conversor de divisas online ha sido creado por Cristina Correa

👀 Vista Previa

➡️ Demo desplegada en GitHub Pages: Haz click aquí

Vista del conversor de divisas

Funcionalidades:

1️⃣ Validación del importe:

• Valida que se haya introducido un importe antes de hacer la conversión. Si no es así aparece un mensaje de aviso de error.

2️⃣ Conversión de divisas con información:

• Permite a los usuarios convertir euros, dólares estadounidenses, canadienses y australianos, libras y yenes. Además, da información sobre las equivalencias de las monedas en tiempo real.

3️⃣ Conversión inversa instantánea:

• En un solo click, puedes hacer la conversión contraria sin ningún problema.

🌱 Características

• Interfaz: Diseño sencillo y adaptable, con una estética monocromática que garantiza una experiencia visual uniforme en cualquier dispositivo.
• Conversión de Divisas: Permite al usuario convertir entre seis divisas populares en tiempo real: euros (EUR), dólares estadounidenses (USD), dólares canadienses (CAD), dólares australianos (AUD), yenes (JPY) y libras esterlinas (GBP).
• Interactividad: Facilita al usuario la conversión bidireccional entre cualquier par de divisas seleccionado con un simple clic.
• Actualización Automática: Las tasas de cambio se actualizan automáticamente a partir de la API Open Source, garantizando la precisión y la actualización en tiempo real de las conversiones.
• Conexión a una API Open Source: Conexión con el objeto XMLHttpRequest a una API Open Source del Banco Nacional de Polonia que devuelve datos en formato xml.

🛠️ Tecnologías Utilizadas

• HTML
• CSS
• JavaScript
• API Open Source

🤖 API

• Al acceder a la API del Banco Nacional de Polonia (NBP), obtenemos información sobre el mercado de divisas y otras tasas de cambio gracias a esta institución financiera. La API está diseñada para proporcionar información sobre las tasas de cambio actuales. La respuesta está en formato XML pero también se puede configurar para devolver un objeto JSON, en mi caso he elegido utilizar el formato XML porque era lo que se me pedía en el ejercicio. Un ejemplo de la llamada a la API sería haciendo "https://api.nbp.pl/api/exchangerates/tables/c/?format=xml" lo cual nos devuelve:

<ArrayOfExchangeRatesTable xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <ExchangeRatesTable>
     <Table>C</Table>
     <No>038/C/NBP/2024</No>
     <TradingDate>2024-02-21</TradingDate>
     <EffectiveDate>2024-02-22</EffectiveDate>
     <Rates>
        <Rate>
          <Currency>dolar amerykański</Currency>
          <Code>USD</Code>
          <Bid>3.9589</Bid>
          <Ask>4.0389</Ask>
        </Rate>
        <Rate>
          <Currency>dolar australijski</Currency>
          <Code>AUD</Code>
          <Bid>2.5937</Bid>
          <Ask>2.6461</Ask>
        </Rate>
        ...
     </Rates>
  </ExchangeRatesTable>
</ArrayOfExchangeRatesTable>

Warning

Al ser una API del NBP, la información está en polaco y las tags en inglés. En general no nos afecta para nada excepto para el nombre de la divisa.

🔎💡 Información

Important

• Este es un proyecto para principiantes. No se requieren conocimientos avanzados de HTML, CSS o JavaScript, pero sí saber cómo hacer conexiones a apis con el objeto XMLHttpRequest.
• Está desarrollado utilizando JavaScript Vanilla, así que no se utiliza ningún framework. Sin embargo, si estás buscando un poco más de desafío, ¡siéntete libre de explorar la posibilidad de integrar un framework!
• Nivel de dificultad del proyecto: 🔴⭕⭕⭕⭕⭕⭕⭕⭕⭕ (1 sobre 10)

Tip

A la hora de desarrollar el proyecto, te pueden venir bien los siguientes recursos:

• API de Obtención de Divisas
• CSS
  • Manz.Dev Lenguaje CSS
• JavaScript:
  • Manz.Dev Lenguaje Javascript
  • JavaScript MDN Documentation
  • XHR: XMLHttpRequest - Manz
• Font Awesome
  • Font Awesome Get Started
  • Font Awesome Documentation

📓 Cómo Usar

1. Descarga o clona este repositorio en tu máquina local.
2. Abre el archivo index.html en tu navegador web.

¡Y eso es todo! Ahora cualquier persona puede usar un conversor de divisas desde un dispositivo.

✨ Contribuciones

¡Las contribuciones son bienvenidas! Si deseas mejorar el conversor de divisas existente, como agregar más contenido o mejorar el diseño, no dudes en enviar tus pull requests. También puedes sugerir nuevas funcionalidades o brindar retroalimentación para hacer que este proyecto sea aún mejor.

🎯 Propósito del Proyecto

Este proyecto forma parte de una tarea de la asignatura de "Desarrollo Web en Entorno Cliente" y tiene como objetivo principal el aprendizaje de tecnologías para mejorar en el plano del desarrollo. Es un proyecto que está inspirado en el conversor de divisas de xe.com