Scribd
Cargar
5 vistas1 página

Script

La función 'buscarDatos' obtiene datos de una API según una fecha seleccionada. Si no hay datos, muestra un mensaje y una imagen predeterminada; de lo contrario, llena una tabla con información y permite cambiar la imagen principal al hacer clic en las filas. Maneja errores de conexión con un mensaje en la consola.

Cargado por

axelin4112
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
5 vistas1 página

Script

La función 'buscarDatos' obtiene datos de una API según una fecha seleccionada. Si no hay datos, muestra un mensaje y una imagen predeterminada; de lo contrario, llena una tabla con información y permite cambiar la imagen principal al hacer clic en las filas. Maneja errores de conexión con un mensaje en la consola.

Cargado por

axelin4112
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd

function buscarDatos() {

const fechaSeleccionada = document.getElementById("fecha").value;


if (!fechaSeleccionada) {
alert("⚠️ Selecciona una fecha");
return;
}

fetch(`http://localhost:3000/datos?fecha=${fechaSeleccionada}`)
.then(response => response.json())
.then(data => {
const tabla = document.getElementById("tablaDatos");
const imagenPrincipal = document.getElementById("imagenPrincipal");
tabla.innerHTML = "";

if (data.length === 0) {
tabla.innerHTML = "<tr><td colspan='7'>❌ No hay datos para esta
fecha.</td></tr>";
imagenPrincipal.src = "default.png";
return;
}

imagenPrincipal.src = data[0].imagen; // Primera imagen

data.forEach(dato => {
const fila = document.createElement("tr");

fila.innerHTML = `
<td>${dato.tempMax}</td>
<td>${dato.tempMin}</td>
<td>${dato.ph}</td>
<td>${dato.humedad}</td>
<td>${dato.fecha}</td>
<td>${dato.hora}</td>
<td><img src="${dato.imagen}" alt="Miniatura" /></td>
`;

// Al hacer clic en la fila o miniatura, cambia la imagen principal


fila.addEventListener("click", () => {
imagenPrincipal.src = dato.imagen;
});

tabla.appendChild(fila);
});
})
.catch(error => console.error("Error al obtener datos:", error));
}

También podría gustarte