Dashboard de Fórmula 1: Ranking de Pilotos y Equipos por Temporada

 

Dashboard de Fórmula 1 con JavaScript y API-FORMULA-1

Si estás buscando una forma sencilla de visualizar resultados de Fórmula 1 en una página web, en este artículo te mostraré cómo construir un dashboard interactivo utilizando HTML, CSS, JavaScript y la API-FORMULA-1 de API-SPORTS.

El resultado es una aplicación web que permite consultar el ranking de pilotos y equipos por temporada, mostrando los datos obtenidos en tiempo real desde una API REST.

¿Qué muestra el dashboard?

La aplicación permite:

• Seleccionar una temporada entre 2019 y 2026.

• Consultar la clasificación de pilotos.

• Consultar la clasificación de constructores.

• Visualizar los puntos acumulados por cada piloto y equipo.

• Mostrar imágenes de pilotos y logotipos de escuderías.

Toda la información se obtiene dinámicamente desde la API-FORMULA-1, evitando la necesidad de almacenar datos localmente.

API utilizada

Para este proyecto se utiliza la API-FORMULA-1 de API-SPORTS disponible a través de RapidAPI.

La documentación oficial puede consultarse en:

https://rapidapi.com/api-sports/api/API-FORMULA-1

Los endpoints utilizados son:

Ranking de pilotos

https://api-formula-1.p.rapidapi.com/rankings/drivers?season=2025

Ranking de equipos

https://api-formula-1.p.rapidapi.com/rankings/teams?season=2025

Estos endpoints devuelven la clasificación oficial de cada temporada en formato JSON.

Tecnologías utilizadas

El dashboard fue desarrollado utilizando:

• HTML5 para la estructura de la página.

• CSS3 para el diseño visual.

• JavaScript para la lógica de la aplicación.

• Fetch API para realizar las consultas HTTP.

• API-FORMULA-1 para obtener los datos deportivos.

Función principal del proyecto

La función principal del dashboard es:

async function fetchRankings()

Esta función se ejecuta cuando el usuario selecciona una temporada y presiona el botón "Ver Ranking".

Su objetivo es:

1. Obtener la temporada seleccionada.

2. Construir las URLs de consulta.

3. Realizar las peticiones HTTP a la API.

4. Procesar las respuestas JSON.

5. Mostrar los resultados en pantalla.

Obtención de la temporada

const season = document.getElementById('season').value;

Este código obtiene el valor seleccionado por el usuario en el menú desplegable.

Construcción de las URLs

const driversUrl = `https://api-formula-1.p.rapidapi.com/rankings/drivers?season=${season}`;
const teamsUrl = `https://api-formula-1.p.rapidapi.com/rankings/teams?season=${season}`;

Las URLs se generan dinámicamente utilizando la temporada seleccionada.

Realizando las consultas con Fetch API

Para obtener la clasificación de pilotos se utiliza la función fetch:

const driversResponse = await fetch(driversUrl, {
    method: "GET",
    headers: {
        'x-rapidapi-key': 'TU_API_KEY',
        'x-rapidapi-host': 'api-formula-1.p.rapidapi.com'
    }
});

La respuesta recibida se convierte posteriormente a formato JSON:

const driversData = await driversResponse.json();

El mismo procedimiento se utiliza para consultar la clasificación de equipos.

Mostrando los resultados

Una vez obtenidos los datos, se utilizan dos funciones independientes:

mostrarRankingDrivers(driversData);
mostrarRankingTeams(teamsData);

Estas funciones recorren la respuesta JSON utilizando:

data.response.forEach(...)

Por cada elemento encontrado se crea dinámicamente un bloque HTML que muestra:

• Posición.

• Nombre del piloto o equipo.

• Puntos acumulados.

• Imagen o logotipo.

Beneficios de este enfoque

Utilizar una API REST ofrece varias ventajas:

• Datos actualizados automáticamente.

• Menor mantenimiento.

• Escalabilidad.

• Fácil integración con otros proyectos.

• Posibilidad de consultar temporadas históricas.

Conclusión

Este dashboard demuestra cómo consumir datos deportivos en tiempo real utilizando JavaScript y la API-FORMULA-1 de API-SPORTS.

Con pocas líneas de código es posible crear aplicaciones interactivas capaces de visualizar estadísticas, clasificaciones y resultados históricos de Fórmula 1. Además, este mismo enfoque puede utilizarse para desarrollar dashboards más avanzados, aplicaciones deportivas o proyectos de análisis de datos.

Demo

https://www.programacionparatodos.com/p/dashboard-formula1-f1.html