From 3945278a1bb086f450de2e886896dc23295697fe Mon Sep 17 00:00:00 2001
From: AmirMontazeri <mr.amir.mti@gmail.com>
Date: Wed, 19 Mar 2025 13:35:05 +0000
Subject: [PATCH 1/3] TV-show added to h1

---
 index.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 72e3702..d1b6e63 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,10 @@
 
   <body>
     <header>
-      <h1>Games of Thrones episodes</h1>
+      <h1>TV-Show episodes</h1>
+      <select id="showSelector">
+        <option value="">Select a Show</option>
+      </select>
       <input type="text" id="searchBar" placeholder="Search episodes..." />
       <select id="episodeSelector">
         <option value="all">Show All Episodes</option>

From cfc81f5298aac495edece7eebf8441d57a5fd758 Mon Sep 17 00:00:00 2001
From: AmirMontazeri <mr.amir.mti@gmail.com>
Date: Wed, 19 Mar 2025 13:36:42 +0000
Subject: [PATCH 2/3] implementation has been added, including the logic for
 fetching and displaying shows and episodes, handling searches, and managing
 selections

---
 script.js | 188 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 101 insertions(+), 87 deletions(-)

diff --git a/script.js b/script.js
index 7474052..59d8dde 100644
--- a/script.js
+++ b/script.js
@@ -1,95 +1,109 @@
-function setup() {
-  const allEpisodes = getAllEpisodes();
-  makePageForEpisodes(allEpisodes);
-  createEpisodeSelector(allEpisodes);
-
-  // Event listener for search
-  document.getElementById("searchBar").addEventListener("input", function () {
-    const searchQuery = this.value.toLowerCase();
-    const filteredEpisodes = allEpisodes.filter(
-      (episode) =>
-        episode.name.toLowerCase().includes(searchQuery) ||
-        episode.summary.toLowerCase().includes(searchQuery)
-    );
-    makePageForEpisodes(filteredEpisodes);
-  });
-
-  // Event listener for episode selector
-  document
-    .getElementById("episodeSelector")
-    .addEventListener("change", function () {
-      const selectedId = this.value;
-      if (selectedId === "all") {
-        makePageForEpisodes(allEpisodes); // Show all episodes
-      } else {
-        const selectedEpisode = allEpisodes.find((ep) => ep.id == selectedId);
-        makePageForEpisodes([selectedEpisode]); // Show only selected episode
-      }
-    });
+const showsApiUrl = "https://api.tvmaze.com/shows";
+let allShows = [];
+let allEpisodes = {};
+
+// Fetch and populate show selector
+async function fetchShows() {
+  const showSelector = document.getElementById("showSelector");
+  try {
+    const response = await fetch(showsApiUrl);
+    if (!response.ok) throw new Error("Failed to fetch shows");
+
+    allShows = await response.json();
+    allShows.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+
+    showSelector.innerHTML = `<option value="">Select a Show</option>` + 
+      allShows.map(show => `<option value="${show.id}">${show.name}</option>`).join("");
+
+    fetchEpisodes(allShows[0].id); // Load first show's episodes by default
+  } catch (error) {
+    console.error("Error fetching shows:", error);
+    document.getElementById("root").innerHTML = `<p style="color: red;">Failed to load shows. Please try again later.</p>`;
+  }
+}
+
+// Fetch episodes for selected show
+async function fetchEpisodes(showId) {
+  const rootElem = document.getElementById("root");
+  rootElem.innerHTML = "<p>Loading episodes...</p>";
+
+  if (allEpisodes[showId]) {
+    makePageForEpisodes(allEpisodes[showId]);
+    return;
+  }
+
+  try {
+    const response = await fetch(`https://api.tvmaze.com/shows/${showId}/episodes`);
+    if (!response.ok) throw new Error("Failed to fetch episodes");
+
+    allEpisodes[showId] = await response.json();
+    makePageForEpisodes(allEpisodes[showId]);
+    createEpisodeSelector(allEpisodes[showId]);
+  } catch (error) {
+    rootElem.innerHTML = `<p style="color: red;">Failed to load episodes.</p>`;
+    console.error("Error fetching episodes:", error);
+  }
 }
 
-function createEpisodeSelector(episodeList) {
+// Populate episode dropdown and display episodes
+function createEpisodeSelector(episodes) {
   const selector = document.getElementById("episodeSelector");
-  selector.innerHTML = ""; // Clear previous options
-
-  // Add "Show All" option
-  const allOption = document.createElement("option");
-  allOption.value = "all";
-  allOption.textContent = "Show All Episodes";
-  selector.appendChild(allOption);
-
-  // Add episodes to dropdown
-  episodeList.forEach((episode) => {
-    const option = document.createElement("option");
-    option.value = episode.id;
-    const episodeCode = `S${String(episode.season).padStart(2, "0")}E${String(
-      episode.number
-    ).padStart(2, "0")}`;
-    option.textContent = `${episodeCode} - ${episode.name}`;
-    selector.appendChild(option);
-  });
+  selector.innerHTML = `<option value="all">Show All Episodes</option>` + 
+    episodes.map(episode => `<option value="${episode.id}">${formatEpisodeTitle(episode)}</option>`).join("");
 }
 
-function makePageForEpisodes(episodeList) {
+function makePageForEpisodes(episodes) {
   const rootElem = document.getElementById("root");
-  rootElem.innerHTML = ""; // Clear previous content
-
-  document.getElementById(
-    "episodeCount"
-  ).textContent = `Showing ${episodeList.length} episode(s)`;
-
-  episodeList.forEach((episode) => {
-    const card = document.createElement("div");
-    card.className = "episode-card";
-    card.id = `episode-${episode.id}`; // Assign an ID for scrolling
-
-    const episodeCode = `S${String(episode.season).padStart(2, "0")}E${String(
-      episode.number
-    ).padStart(2, "0")}`;
-    const title = document.createElement("h2");
-    title.textContent = `${episode.name} (${episodeCode})`;
-
-    const img = document.createElement("img");
-    img.src = episode.image
-      ? episode.image.medium
-      : "https://via.placeholder.com/300";
-    img.alt = episode.name;
-
-    const summary = document.createElement("p");
-    summary.innerHTML = episode.summary;
-
-    const link = document.createElement("a");
-    link.href = episode._links.self.href;
-    link.target = "_blank";
-    link.textContent = "More info on TVMaze";
-
-    card.appendChild(title);
-    card.appendChild(img);
-    card.appendChild(summary);
-    card.appendChild(link);
-
-    rootElem.appendChild(card);
-  });
+
+  if (episodes.length === 0) {
+    rootElem.innerHTML = `<p>No episodes found.</p>`;
+    return;
+  }
+
+  rootElem.innerHTML = episodes.map(episode => `
+    <div class="episode-card">
+      <h3>${formatEpisodeTitle(episode)}</h3>
+      <img src="${episode.image ? episode.image.medium : 'https://via.placeholder.com/210'}" alt="${episode.name}">
+      <p>${episode.summary || "No description available."}</p>
+    </div>
+  `).join("");
+}
+
+// Format episode title
+function formatEpisodeTitle(episode) {
+  return `S${String(episode.season).padStart(2, "0")}E${String(episode.number).padStart(2, "0")} - ${episode.name}`;
 }
 
-window.onload = setup;
+// Handle search functionality
+document.getElementById("searchBar").addEventListener("input", function () {
+  const query = this.value.toLowerCase();
+  const selectedShowId = document.getElementById("showSelector").value;
+  const filteredEpisodes = allEpisodes[selectedShowId].filter(
+    (episode) => episode.name.toLowerCase().includes(query) || (episode.summary && episode.summary.toLowerCase().includes(query))
+  );
+
+  if (filteredEpisodes.length === 0) {
+    document.getElementById("root").innerHTML = `<p>No results found for "${query}"</p>`;
+  } else {
+    makePageForEpisodes(filteredEpisodes);
+  }
+});
+
+// Handle episode selection
+document.getElementById("episodeSelector").addEventListener("change", function () {
+  const selectedId = this.value;
+  const selectedShowId = document.getElementById("showSelector").value;
+  if (selectedId === "all") {
+    makePageForEpisodes(allEpisodes[selectedShowId]);
+  } else {
+    makePageForEpisodes([allEpisodes[selectedShowId].find(ep => ep.id == selectedId)]);
+  }
+});
+
+// Handle show selection
+document.getElementById("showSelector").addEventListener("change", function () {
+  fetchEpisodes(this.value);
+});
+
+// Initialize application
+window.onload = fetchShows;

From e93d80890123171fdeab9ba0afc056c968183a56 Mon Sep 17 00:00:00 2001
From: AmirMontazeri <mr.amir.mti@gmail.com>
Date: Wed, 19 Mar 2025 13:38:31 +0000
Subject: [PATCH 3/3] style changed

---
 style.css | 67 +++++++++++++++++++++++++------------------------------
 1 file changed, 30 insertions(+), 37 deletions(-)

diff --git a/style.css b/style.css
index 5bd3aab..1a44f47 100644
--- a/style.css
+++ b/style.css
@@ -1,16 +1,26 @@
-#root {
-  color: red;
-}
 body {
   font-family: Arial, sans-serif;
-  background-color: #f5f5f5;
-  text-align: center;
+  background-color: #f9f9f9;
+  color: #333;
   margin: 0;
   padding: 0;
+  text-align: center;
 }
 
 h1 {
   margin-top: 20px;
+  color: #007bff;
+}
+
+#searchBar, #showSelector, #episodeSelector {
+  width: 90%;
+  max-width: 600px;
+  padding: 10px;
+  margin: 10px auto;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 16px;
+  display: block;
 }
 
 #root {
@@ -22,54 +32,37 @@ h1 {
 }
 
 .episode-card {
-  background: white;
+  background-color: white;
   border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
   width: 300px;
   padding: 15px;
+  transition: transform 0.3s;
 }
 
-.episode-card img {
-  width: 100%;
-  border-radius: 5px;
+.episode-card:hover {
+  transform: scale(1.05);
 }
 
-#searchBar {
-  width: 50%;
-  padding: 10px;
-  margin: 10px 0;
-  border: none;
-  border-radius: 5px;
-  font-size: 16px;
+.episode-card img {
+  width: 100%;
+  border-radius: 8px;
 }
 
-#episodeSelector {
-  width: 50%;
-  padding: 10px;
-  margin: 10px 0;
-  border: none;
-  border-radius: 5px;
-  font-size: 16px;
+.episode-card h3 {
+  color: #007bff;
 }
 
-a {
-  display: block;
-  margin-top: 10px;
-  color: #0073e6;
-  text-decoration: none;
+p {
+  font-size: 14px;
 }
 
 footer {
   margin-top: 20px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  background-color: silver;
-  /* Dark background for contrast */
+  background-color: #007bff;
   color: white;
-  /* Light text */
   text-align: center;
-  padding: 10px 0;
+  padding: 10px;
   font-size: 14px;
 }
