cba85/app.js

## app.js
const form = document.querySelector("form");

form.addEventListener("submit", async (e) => {
  e.preventDefault();

  document.querySelector("#results").textContent = "";

  const q = form.q.value;

  if (!q) {
    const error = document.querySelector(".error");
    error.textContent = "Erreur : veuillez entrer une série";
    error.style.display = "block";
    return;
  }

  document.querySelector(".error").style.display = "none";

  const response = await fetch(`https://api.tvmaze.com/search/shows?q=${q}`);
  const shows = await response.json();

  if (!shows.length) {
    const error = document.querySelector(".error");
    error.textContent = "Aucun résultat";
    error.style.display = "block";
    return;
  }

  for (const show of shows) {
    console.log(show);

    let html = `<h2>${show.show.name}</h2>`;

    if (show.show.image) {
      html += `<img
      src="${show.show.image.medium}"
      alt="${show.show.name}"
    />`;
    }

    /*
    html += `<p>Genres : `;

    for (const genre of show.show.genres) {
      html += `${genre} `;
    }
    */

    if (show.show.genres.length) {
      const genres = show.show.genres.join(", ");
      html += `<p>Genres : ${genres}</p>`;
    }

    html += `<p><strong>⭐️ ${
      show.show.rating.average ? show.show.rating.average : "<em>-</em>"
    }</strong></p>`;

    if (show.show.summary) {
      html += `<blockquote>${show.show.summary}</blockquote>`;
    }

    if (show.show.status === "Ended") {
      html += `<mark>Terminé</mark>`;
    }

    html += `<ul>`;

    if (show.show.averageRuntime) {
      html += `<li>Durée moyenne des épisodes : ${show.show.averageRuntime} min</li>`;
    }

    if (show.show.premiered) {
      const premiered = new Date(show.show.premiered);
      html += `<li>Début : ${premiered.toLocaleDateString("fr-FR")}</li>`;
    }

    if (show.show.ended) {
      const ended = new Date(show.show.ended);
      html += `<li>Fin : ${ended.toLocaleDateString("fr-FR")}</li>`;
    }

    if (show.show.officialSite) {
      html += `<li><a href="${show.show.officialSite}">Site officiel</a></li>`;
    }

    html += `</ul>`;

    const showElement = document.createElement("div");
    showElement.innerHTML = html;

    document.querySelector("#results").appendChild(showElement);
  }
});

## index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TV Maze</title>
    <script src="app.js" defer></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/holiday.css@0.11.2"
    />

    <style>
      form {
        margin-bottom: 1em;
      }

      .show {
        margin-top: 1em;
        padding: 1em;
        border: 1px solid lightgray;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <h1>TV Maze</h1>

    <form>
      <label for="q">Recherchez une série</label>
      <input type="text" name="q" id="q" />
      <footer>
        <button type="submit">Rechercher</button>
      </footer>
    </form>

    <code class="error" style="display: none"></code>

    <div id="results"></div>
  </body>
</html>
	const form = document.querySelector("form");

	form.addEventListener("submit", async (e) => {
	e.preventDefault();

	document.querySelector("#results").textContent = "";

	const q = form.q.value;

	if (!q) {
	const error = document.querySelector(".error");
	error.textContent = "Erreur : veuillez entrer une série";
	error.style.display = "block";
	return;
	}

	document.querySelector(".error").style.display = "none";

	const response = await fetch(`https://api.tvmaze.com/search/shows?q=${q}`);
	const shows = await response.json();

	if (!shows.length) {
	const error = document.querySelector(".error");
	error.textContent = "Aucun résultat";
	error.style.display = "block";
	return;
	}

	for (const show of shows) {
	console.log(show);

	let html = `<h2>${show.show.name}</h2>`;

	if (show.show.image) {
	html += `<img
	src="${show.show.image.medium}"
	alt="${show.show.name}"
	/>`;
	}

	/*
	html += `<p>Genres : `;

	for (const genre of show.show.genres) {
	html += `${genre} `;
	}
	*/

	if (show.show.genres.length) {
	const genres = show.show.genres.join(", ");
	html += `<p>Genres : ${genres}</p>`;
	}

	html += `<p><strong>⭐️ ${
	show.show.rating.average ? show.show.rating.average : "<em>-</em>"
	}</strong></p>`;

	if (show.show.summary) {
	html += `<blockquote>${show.show.summary}</blockquote>`;
	}

	if (show.show.status === "Ended") {
	html += `<mark>Terminé</mark>`;
	}

	html += `<ul>`;

	if (show.show.averageRuntime) {
	html += `<li>Durée moyenne des épisodes : ${show.show.averageRuntime} min</li>`;
	}

	if (show.show.premiered) {
	const premiered = new Date(show.show.premiered);
	html += `<li>Début : ${premiered.toLocaleDateString("fr-FR")}</li>`;
	}

	if (show.show.ended) {
	const ended = new Date(show.show.ended);
	html += `<li>Fin : ${ended.toLocaleDateString("fr-FR")}</li>`;
	}

	if (show.show.officialSite) {
	html += `<li><a href="${show.show.officialSite}">Site officiel</a></li>`;
	}

	html += `</ul>`;

	const showElement = document.createElement("div");
	showElement.innerHTML = html;

	document.querySelector("#results").appendChild(showElement);
	}
	});
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>TV Maze</title>
	<script src="app.js" defer></script>
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/holiday.css@0.11.2"
	/>

	<style>
	form {
	margin-bottom: 1em;
	}

	.show {
	margin-top: 1em;
	padding: 1em;
	border: 1px solid lightgray;
	border-radius: 4px;
	}
	</style>
	</head>
	<body>
	<h1>TV Maze</h1>

	<form>
	<label for="q">Recherchez une série</label>
	<input type="text" name="q" id="q" />
	<footer>
	<button type="submit">Rechercher</button>
	</footer>
	</form>

	<code class="error" style="display: none"></code>

	<div id="results"></div>
	</body>
	</html>