Building the ATP Dashboard Tennis.com with Javascript

Imagen
Building the ATP Dashboard The goal of this project was to create a web page capable of displaying ATP rankings in a simple and visually appealing way. To accomplish this, I built a dashboard that retrieves data directly from Tennis API using JavaScript and the Fetch API. The application includes several useful features: ATP Top 3 players overview. Total number of players returned by the API. Dynamic player search. Interactive ATP ranking table. All information is loaded in real time and updated whenever the page is refreshed. You can try the live version of the dashboard here: ATP Tennis Dashboard Demo I also recorded a short video showing how to obtain an API Key through RapidAPI, explore the available endpoints, and test the dashboard: Watch the English Video Tutorial Download the Source Code If you'd like to experiment with the project or customize it for your own applications, the complete source code is available for download. The package includes: Co...

👉 Cómo obtener el tipo de cambio en Excel con API de Banxico (paso a paso)

Cómo obtener el tipo de cambio en JavaScript con la API de Banxico (Paso a paso)

Ejemplo práctico: Aprende a obtener el tipo de cambio del dólar en tiempo real usando JavaScript y la API de Banxico. Ideal para integrar datos financieros en tus aplicaciones o dashboards.


En este tutorial aprenderás cómo obtener el tipo de cambio usando JavaScript y la API de Banxico paso a paso. Si no quieres programar o prefieres una solución más rápida, al final también te dejo una opción para hacerlo directamente desde Excel.

🚀 ¿Qué vas a aprender?

  • Cómo obtener tu token de Banxico
  • Cómo consumir una API con fetch()
  • Cómo leer datos JSON
  • Cómo mostrar el tipo de cambio en tu página web

🔑 Cómo obtener tu API Key de Banxico

Para poder consumir la API necesitas generar un token gratuito desde el siguiente enlace:

👉 Obtener token de Banxico

Con este token puedes realizar hasta 40,000 consultas gratuitas por día.


📊 Identificar la serie del tipo de cambio (SF43718)

Para obtener el tipo de cambio FIX USD/MXN usamos la serie:

SF43718

Puedes consultar el catálogo completo aquí:

👉 Ver catálogo de series Banxico


💻 Código JavaScript para obtener el tipo de cambio


const url = 'https://www.banxico.org.mx/SieAPIRest/service/v1/series/SF43718/datos/oportuno?token=TU_TOKEN';

fetch(url)
  .then(response => response.json())
  .then(data => {
    const resultados = data.bmx.series;
    const divResultados = document.getElementById('resultado');

    resultados.forEach(serie => {
      const p = document.createElement('p');
      p.textContent = `${serie.nombre}: $${serie.datos[0].dato}`;
      divResultados.appendChild(p);
    });
  })
  .catch(error => {
    console.error('Error:', error);
    document.getElementById('resultado').textContent = 'Error al obtener los datos';
  });
  • Se hace una petición a la API de Banxico
  • Se obtiene el tipo de cambio en formato JSON
  • Se muestra dinámicamente en la página

💡 Alternativa sin programar:

Si no quieres implementar JavaScript o necesitas una solución más rápida en tu trabajo diario, puedes usar una plantilla de Excel que ya conecta con la API de Banxico automáticamente.

👉 Ver plantilla lista para usar

🌐 Ver ejemplo funcionando

👉 Ver demo en vivo


💡 ¿Para qué puedes usar esta API?

  • Dashboards financieros
  • Automatización en Excel
  • Aplicaciones web con datos económicos
  • Integraciones con sistemas empresariales

📚 Más ejemplos de APIs en JavaScript

👉 Ejemplo API Fórmula 1

👉 Consultar UDIS con API


🎥 Video explicación


Como llamar la API de Banxico desde Excel

🏁 Conclusión

Consumir la API de Banxico es una excelente forma de trabajar con datos reales en tus proyectos.

Si dominas este ejemplo, puedes escalar a integraciones más complejas como APIs empresariales o automatización en Excel.

TIP: prueba modificar la serie para obtener CETES o TIIE 😉

Comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

Macro en Word para automatizar documentos: genera diplomas en segundos (con código VBA)