Skip to content

Instantly share code, notes, and snippets.

@fernandezmm

fernandezmm/calculadora-grupo-a-lfp.html

Created November 12, 2025 02:35
Show Gist options
  • Save fernandezmm/7718688b9352344ca237c1b4d3290fae to your computer and use it in GitHub Desktop.
Save fernandezmm/7718688b9352344ca237c1b4d3290fae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calculadora-grupo-a-lfp.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Resultados - Grupo A</title>
<style>
body, html {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: #333;
box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; }
.tabla-container {
width: 100%;
max-width: 800px;
margin: 1rem auto;
overflow-x: auto;
border: 1px solid #ddd;
border-radius: 8px;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th, td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
text-align: center;
}
thead th {
background-color: #f4f4f4;
color: #555;
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
}
tbody tr:nth-child(even) { background-color: #f9f9f9; }
tbody tr:hover { background-color: #f0f0f0; }
.col-equipo {
text-align: left;
font-weight: 600;
width: 40%;
display: flex;
align-items: center;
}
.bandera {
margin-right: 10px;
font-size: 1rem;
vertical-align: middle;
}
.col-pts {
font-weight: 700;
color: #000;
}
@media (max-width: 600px) {
.col-opcional { display: none; }
th, td { padding: 10px 8px; font-size: 14px; }
.col-equipo { width: 50%; }
}
</style>
</head>
<body>
<div class="tabla-container">
<table>
<thead>
<tr>
<th class="col-equipo">Equipo</th>
<th>PJ</th>
<th class="col-opcional">G</th>
<th class="col-opcional">E</th>
<th class="col-opcional">P</th>
<th class="col-opcional">GF</th>
<th class="col-opcional">GC</th>
<th>DG</th>
<th class="col-pts">Pts</th>
</tr>
</thead>
<tbody id="tabla-grupo-a-cuerpo">
</tbody>
</table>
</div>
<script>
// --- 1. ESTRUCTURA DE DATOS ---
// Aquí están los datos de su tabla.
const datosEquipos =;
// --- FIN DE DATOS ---
function calcularEstadoDerivado(equipos) {
return equipos.map(equipo => {
const puntos = (equipo.g * 3) + (equipo.e * 1);
const dg = equipo.gf - equipo.gc;
return {...equipo, puntos: puntos, dg: dg };
});
}
function ordenarEquipos(equipos) {
return equipos.sort((a, b) => {
if (a.puntos!== b.puntos) { return b.puntos - a.puntos; }
if (a.dg!== b.dg) { return b.dg - a.dg; }
if (a.gf!== b.gf) { return b.gf - a.gf; }
return a.nombre.localeCompare(b.nombre);
});
}
function renderizarTabla(equipos) {
const cuerpoTabla = document.getElementById('tabla-grupo-a-cuerpo');
cuerpoTabla.innerHTML = ''; // Limpiar
equipos.forEach(equipo => {
const filaHtml = `
<tr>
<td class="col-equipo">
<span class="bandera">${equipo.bandera}</span>
${equipo.nombre}
</td>
<td>${equipo.pj}</td>
<td class="col-opcional">${equipo.g}</td>
<td class="col-opcional">${equipo.e}</td>
<td class="col-opcional">${equipo.p}</td>
<td class="col-opcional">${equipo.gf}</td>
<td class="col-opcional">${equipo.gc}</td>
<td>${equipo.dg > 0? '+' : ''}${equipo.dg}</td>
<td class="col-pts">${equipo.puntos}</td>
</tr>
`;
cuerpoTabla.insertAdjacentHTML('beforeend', filaHtml);
});
}
document.addEventListener('DOMContentLoaded', () => {
const equiposConCalculos = calcularEstadoDerivado(datosEquipos);
const equiposOrdenados = ordenarEquipos(equiposConCalculos);
renderizarTabla(equiposOrdenados);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment