Cómo crear un Predictor de Partidos de Fútbol con JavaScript y API-Football

⚽ Cómo crear un Predictor de Partidos de Fútbol con JavaScript y API-Football

En este tutorial aprenderás a crear un Football Match Predictor utilizando JavaScript y la API de API-Football. El proyecto consume una API REST para obtener los partidos del día, mostrar las competiciones disponibles y consultar las probabilidades de victoria de cada encuentro.

El resultado es un dashboard dinámico que funciona para cientos de ligas alrededor del mundo, incluyendo el Mundial, Champions League, Premier League, LaLiga, Liga MX y muchas más.

---

🚀 Demo

Puedes probar el dashboard aquí:

👉 Football Match Predictor Demo

---

📚 Documentación oficial

La documentación completa de API-Football se encuentra en:

---

🔑 Obtener una API Key

Para utilizar la API primero debes crear una cuenta gratuita y generar una API Key.

Puedes hacerlo desde:

https://dashboard.api-football.com/

Después únicamente reemplaza tu llave dentro del código JavaScript:

const API_KEY="TU_API_KEY";

Los costos hay 4 modelos, por un mes, 3 meses, 6 meses y por año .

---

📈 Arquitectura del Dashboard

Usuario

↓

Selecciona una fecha

↓

GET /fixtures

↓

Obtiene todos los partidos del día

↓

Genera automáticamente la lista de ligas

↓

Selecciona una competición

↓

GET /predictions

↓

Muestra probabilidades de victoria

Esta arquitectura permite reducir el número de llamadas a la API y mejorar el rendimiento del dashboard.

---

⚙️ Endpoints utilizados

1. Obtener partidos

GET /fixtures

Ejemplo:

GET /fixtures?date=2026-06-30

Este endpoint devuelve información como:

• Fixture ID
• Equipos
• Escudos
• Liga
• Estadio
• Fecha y hora

2. Obtener predicciones

GET /predictions

Ejemplo:

GET /predictions?fixture=1562345

La respuesta incluye:

• Equipo favorito
• Probabilidad del equipo local
• Probabilidad de empate
• Probabilidad del visitante
• Advice (recomendación)

Funciones en Javascript para obtener las Ligas de futbol o competencias 

function fillLeagueCombo(){

const combo=document.getElementById("league");

combo.innerHTML="";

const map=new Map();

fixtures.forEach(f=>{

 if(!map.has(f.league.id)){

   map.set(f.league.id,{

      id:f.league.id,

      season:f.league.season,

      name:f.league.name,

      country:f.league.country

   });

 }

});

Array.from(map.values())

.sort((a,b)=>a.name.localeCompare(b.name))

.forEach(l=>{

 const op=document.createElement("option");

 op.value=l.id+"|"+l.season;

 op.textContent=l.country+" - "+l.name;

 combo.appendChild(op);

});

combo.onchange=renderLeague;

}

---

💻 Tecnologías utilizadas

• HTML5
• CSS3
• JavaScript ES6
• Fetch API
• REST API
• JSON

---

✨ Características del Dashboard

• Consultar partidos por fecha.
• Seleccionar cualquier competición disponible.
• Mostrar escudos oficiales.
• Mostrar estadio y ronda.
• Consultar predicciones.
• Mostrar probabilidades de victoria.
• Mostrar el equipo favorito.
• Mostrar recomendaciones generadas por la API.

---

📌 Ideas para seguir mejorando el proyecto

API-Football ofrece una gran cantidad de información que puede utilizarse para desarrollar nuevos dashboards.

• 📊 Tabla de posiciones.
• ⚽ Resultados en vivo.
• 📅 Calendario completo de la temporada.
• 🥇 Máximos goleadores.
• 👤 Estadísticas por jugador.
• 🧤 Porteros con más atajadas.
• 🤝 Historial entre equipos (Head to Head).
• 🚑 Lesiones.
• 📋 Alineaciones oficiales.
• 📈 Estadísticas avanzadas.
• 🏆 Dashboard para Champions League.
• 🌎 Dashboard para el Mundial.
• 🇲🇽 Dashboard para Liga MX.
• 🏴 Dashboard para Premier League.
• 🇪🇸 Dashboard para LaLiga.

---

🎯 Conclusión

Este proyecto demuestra cómo consumir una API REST utilizando únicamente HTML, CSS y JavaScript, construyendo un dashboard moderno capaz de mostrar información deportiva en tiempo real.

La misma arquitectura puede reutilizarse para desarrollar aplicaciones con resultados en vivo, estadísticas, clasificaciones o cualquier otro dato disponible en API-Football.

Si estás aprendiendo JavaScript, este proyecto es una excelente práctica para consumir APIs REST, trabajar con JSON y construir interfaces dinámicas.

---

¿Qué otro dashboard te gustaría desarrollar utilizando API-Football? Déjamelo en los comentarios. ⚽🚀