Explicaci贸n Interactiva de script.js
Mientras el audio avanza, se iluminar谩n tanto los bloques explicativos como las secciones exactas del c贸digo.
馃摉 Explicaci贸n del Audio
馃敼 Introducci贸n
El script conecta la web con el JSON generado desde Java y crea tarjetas din谩micamente.
馃敼 DOMContentLoaded
Espera a que el HTML cargue completamente.
馃敼 Variables
Define la ruta del JSON y el contenedor HTML.
馃敼 Fetch y lectura JSON
Fetch obtiene el archivo JSON y lo convierte a objetos JS.
馃敼 Bucle din谩mico
Se crean autom谩ticamente las tarjetas Bootstrap.
馃敼 Gesti贸n de errores
El catch captura errores del servidor o JSON.
馃敼 Conclusi贸n
El gimnasio muestra actividades reales autom谩ticamente.
馃捇 C贸digo Sincronizado
{
document.addEventListener("DOMContentLoaded", () => {
// Ruta del archivo JSON
const rutaJson = "actividades_web.json";
const contenedor = document.getElementById("contenedor-actividades");
// Leer archivo JSON
fetch(rutaJson)
.then(response => {
if (!response.ok) {
throw new Error("No se pudo cargar el archivo JSON");
}
return response.json();
})
.then(actividades => {
contenedor.innerHTML = "";
if (actividades.length === 0) {
contenedor.innerHTML = \`
<div class="col-12 text-center">
<p>No hay actividades</p>
</div>\`;
return;
}
actividades.forEach(act => {
const tarjetaHTML = \`
<div class="col-md-4">
<div class="card actividad-card shadow">
<div class="card-body">
<h5>Actividad Programada</h5>
<p>
\${act.nombre_sala}
</p>
</div>
</div>
</div>\`;
contenedor.innerHTML += tarjetaHTML;
});
})
.catch(error => {
console.error(error);
contenedor.innerHTML = \`
<div class="text-danger">
Error al cargar actividades
</div>\`;
});
});