En este capítulo vamos a utilizar la API de TVMAZE, que se trata de una página donde publican sobre todo shows de televisión en EEUU, con toda la información de en qué canales, a que fechas, a qué horas…
TVMAZE tiene una API pública con la que podemos hacer diferentes cosas, aunque nos enfocaremos en mostrar los shows a partir de una búsqueda, es decir, vamos a hacer un buscador dinámico.
Para ello vamos a ir al editor que estemos utilizando (recomendamos Visual Studio Code) y creamos un archivo denominado api-tv-shows.html, que contendrá el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buscador de shows de TV</title>
<style>
.grid-fluid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.loader {
display: block;
margin: auto;
}
</style>
</head>
<body>
<h1>Buscador de shows de TV</h1>
<input type="search" name="" id="search" placeholder="Buscar shows..." />
<section id="shows" class="grid-fluid"></section>
<template id="show-template">
<article class="show">
<h3></h3>
<div></div>
<img />
<a></a>
</article>
</template>
<script>
const d = document,
$shows = d.getElementById("shows"),
$template = d.getElementById("show-template").content,
$fragment = d.createDocumentFragment();
d.addEventListener("keypress", async (e) => {
if (e.target.matches("#search")) {
if (e.key === "Enter") {
try {
$shows.innerHTML = `<img class="loader" src="./loader.svg" alt="cargando">`;
let query = e.target.value.toLowerCase(),
api = `https://api.tvmaze.com/search/shows?q=${query}`,
res = await fetch(api),
json = await res.json();
// console.log(api, res, json);
if (!res.ok)
throw {
status: res.status,
statusText: res.statusText,
};
if (json.lenght === 0) {
$shows.innerHTML = `<h2>No existen resultados de shows para el criterio de búsqueda: ${query}</h2>`;
} else {
json.forEach((el) => {
$template.querySelector("h3").textContent = el.show.name;
$template.querySelector("div").innerHTML = el.show.summary
? el.show.summary
: "Sin descripción";
$template.querySelector("img").src = el.show.image
? el.show.image.medium
: "No img";
$template.querySelector("img").alt = el.show.name;
$template.querySelector("img").style.maxWidth = "100%";
$template.querySelector("a").href = el.show.url
? el.show.url
: "#";
$template.querySelector("a").target = el.show.url
? "_blank"
: "_self";
$template.querySelector("a").textContent = el.show.url
? "Ver más..."
: "";
let $clone = d.importNode($template, true);
$fragment.appendChild($clone);
});
$shows.innerHTML = "";
$shows.appendChild($fragment);
}
} catch (err) {
console.log(err);
let message = err.statusText || "Ocurrió un error";
$shows.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
}
}
}
});
</script>
</body>
</html>