xqft · September 14, 2022 22:25
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="es">

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Buscador de imágenes de la NASA</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
 </head>

 <body>
  <main>
    <div class="text-center container">
      <div class="row py-lg-3">
        <div class="col-lg-6 col-md-8 mx-auto">
          <h1 class="fw-light">Buscador de imágenes de la NASA</h1>
          <input type="search" class="form-control" name="buscar" id="inputBuscar" placeholder="Ej.: JUPITER">
          <button class="btn btn-primary my-2" id="btnBuscar">Buscar imágenes</button>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row row-cols-3" id="contenedor"></div>
      <div class="row">
        <button class="btn btn-primary my-2 d-none" id="verMas">Ver más</button>
      </div>
    </div>
  </main>

  <footer class="text-muted py-5">
    <div class="container">
      <p class="float-end mb-1">
        <a href="#">Volver arriba</a>
      </p>
      <p class="mb-1">Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">
          Jovenes a Programar</a>, y consume datos de <a href="https://api.nasa.gov/" target="_blank">
          api.nasa.gov</a></p>
      <p class="mb-1">Generado con fines estrictamente educativos.</p>
    </div>
  </footer>

  <script src="js/space.js"></script>

 </body>

 </html>
diff --git a/space.js b/space.js
 const NASA_URL = "https://images-api.nasa.gov/search?q=";
 const NOT_FOUND_GIF = "https://cdn.dribbble.com/users/1129101/screenshots/3513987/404.gif";
 let contenidoMaximo = 12;

 document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector("#inputBuscar");
    const boton = document.querySelector("#btnBuscar");
    
    boton.addEventListener("click", async () => {
        const response = await fetch(NASA_URL + input.value);
        const datos = await response.json();        
        
        showResults(datos.collection);
        document.querySelector("#verMas").classList.remove("d-none");
    })
 });

 function showResults(datos) {
    const container = document.querySelector("#contenedor");
    let contenidoHTML = "";

    for (let i = 0; i < Math.min(contenidoMaximo, datos.items.length); i++) {
        const item = datos.items[i];

        let imgSrc = NOT_FOUND_GIF;
        if (item.links)
            imgSrc = item.links[0].href; 

        const date = new Date(item.data[0].date_created).toLocaleString() ?? "Sin fecha";
        const title = item.data[0].title ?? "Sin título";
        const description = item.data[0].description_508 ?? "Sin descripción";

        contenidoHTML +=
        `
        <div class="col mb-3">
            <div class="card h-100 mb-2 shadow-sm rounded-3">
                <img src="${imgSrc}" class="card-img-top" alt="${title}">
                    <h4 class="card-title">${title}</h5>
                    <p class="card-text">${description}</p>
                    <p class="card-text text-secondary">${date}</p>
            </div>
        </div>
        `;
    }
    container.innerHTML = contenidoHTML;

    document.querySelector("#verMas").addEventListener("click", (event) => {
        contenidoMaximo += 12; 
        showResults(datos);

        const boton = event.target;
        if (contenidoMaximo >= datos.items.length) {
            boton.setAttribute("disabled", "");
            boton.innerHTML = "Sin resultados restantes";
        }
    });
 }

 /* Formato de los datos:
    collection: {}
        items: []
            data: {title, date, description_508}
            links: []
                {href} // link de la imagen
 */
	<!doctype html>
	<html lang="es">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Buscador de imágenes de la NASA</title>

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
	</head>

	<body>
	<main>
	<div class="text-center container">
	<div class="row py-lg-3">
	<div class="col-lg-6 col-md-8 mx-auto">
	<h1 class="fw-light">Buscador de imágenes de la NASA</h1>
	<input type="search" class="form-control" name="buscar" id="inputBuscar" placeholder="Ej.: JUPITER">
	<button class="btn btn-primary my-2" id="btnBuscar">Buscar imágenes</button>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="row row-cols-3" id="contenedor"></div>
	<div class="row">
	<button class="btn btn-primary my-2 d-none" id="verMas">Ver más</button>
	</div>
	</div>
	</main>

	<footer class="text-muted py-5">
	<div class="container">
	<p class="float-end mb-1">
	<a href="#">Volver arriba</a>
	</p>
	<p class="mb-1">Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">
	Jovenes a Programar</a>, y consume datos de <a href="https://api.nasa.gov/" target="_blank">
	api.nasa.gov</a></p>
	<p class="mb-1">Generado con fines estrictamente educativos.</p>
	</div>
	</footer>

	<script src="js/space.js"></script>

	</body>

	</html>
	const NASA_URL = "https://images-api.nasa.gov/search?q=";
	const NOT_FOUND_GIF = "https://cdn.dribbble.com/users/1129101/screenshots/3513987/404.gif";
	let contenidoMaximo = 12;

	document.addEventListener('DOMContentLoaded', () => {
	const input = document.querySelector("#inputBuscar");
	const boton = document.querySelector("#btnBuscar");

	boton.addEventListener("click", async () => {
	const response = await fetch(NASA_URL + input.value);
	const datos = await response.json();

	showResults(datos.collection);
	document.querySelector("#verMas").classList.remove("d-none");
	})
	});

	function showResults(datos) {
	const container = document.querySelector("#contenedor");
	let contenidoHTML = "";

	for (let i = 0; i < Math.min(contenidoMaximo, datos.items.length); i++) {
	const item = datos.items[i];

	let imgSrc = NOT_FOUND_GIF;
	if (item.links)
	imgSrc = item.links[0].href;

	const date = new Date(item.data[0].date_created).toLocaleString() ?? "Sin fecha";
	const title = item.data[0].title ?? "Sin título";
	const description = item.data[0].description_508 ?? "Sin descripción";

	contenidoHTML +=
	`
	<div class="col mb-3">
	<div class="card h-100 mb-2 shadow-sm rounded-3">
	<img src="${imgSrc}" class="card-img-top" alt="${title}">
	<h4 class="card-title">${title}</h5>
	<p class="card-text">${description}</p>
	<p class="card-text text-secondary">${date}</p>
	</div>
	</div>
	`;
	}
	container.innerHTML = contenidoHTML;

	document.querySelector("#verMas").addEventListener("click", (event) => {
	contenidoMaximo += 12;
	showResults(datos);

	const boton = event.target;
	if (contenidoMaximo >= datos.items.length) {
	boton.setAttribute("disabled", "");
	boton.innerHTML = "Sin resultados restantes";
	}
	});
	}

	/* Formato de los datos:
	collection: {}
	items: []
	data: {title, date, description_508}
	links: []
	{href} // link de la imagen
	*/