From 118a073d863813ae4d19477b03f6d3d12556c712 Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Sun, 9 Aug 2026 18:49:17 +0100
Subject: [PATCH 01/14] level 0: change the name and github username on hmtl
 file

---
 index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 9a400d1..3987ead 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TV Show Project | My Name (My GitHub username)</title>
+    <title>
+      TV Show Project | Name:Abdu Hassen (GitHub username:Abduhasen)
+    </title>
     <link href="style.css" rel="stylesheet" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   </head>
 
   <body>
-    <div id="root">
-    </div>
+    <div id="root"></div>
 
     <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
     <script src="episodes.js"></script>

From 1f197624f0e184f2a601ad5e03d599347ef17a7f Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Mon, 10 Aug 2026 01:40:54 +0100
Subject: [PATCH 02/14] level 100:created template  elements on html, and wrote
 a footer on html,using <template> add a function for each episodes that
 create a card and write all necessary information.  added css style borders
 for texts and images

---
 index.html | 12 ++++++++
 script.js  | 16 +++++++++-
 style.css  | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 111 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 3987ead..2d2c55a 100644
--- a/index.html
+++ b/index.html
@@ -12,11 +12,23 @@
 
   <body>
     <div id="root"></div>
+    <template id="episodes-template">
+      <article class="movie-card">
+        <h3 class="episode-title"></h3>
+        <p class="episode-season"></p>
+        <img class="episode-image" src="" alt="" />
+        <p class="episode-summery"></p>
+      </article>
+    </template>
 
     <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
     <script src="episodes.js"></script>
 
     <!-- Loads YOUR javascript code -->
     <script src="script.js"></script>
+    <footer>
+      Data sourced from
+      <a href="https://tvmaze.com">TVMaze.com (https://tvmaze.com/)</a>
+    </footer>
   </body>
 </html>
diff --git a/script.js b/script.js
index 87a7de8..c85a9df 100644
--- a/script.js
+++ b/script.js
@@ -6,7 +6,21 @@ function setup() {
 
 function makePageForEpisodes(episodeList) {
   const rootElem = document.getElementById("root");
-  rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+  const template = document.getElementById("episodes-template");
+
+  episodeList.forEach((episode) => {
+    const card = template.content.cloneNode(true);
+    const image = card.querySelector(".episode-image");
+    image.src = episode.image.medium;
+    image.alt = episode.name;
+    card.querySelector(".episode-title").textContent = episode.name;
+    const season = String(episode.season).padStart(2, "0");
+    const number = String(episode.number).padStart(2, "0");
+    card.querySelector(".episode-season").textContent = `S${season}E${number}`;
+
+    card.querySelector(".episode-summery").innerHTML = episode.summary;
+    rootElem.appendChild(card);
+  });
 }
 
 window.onload = setup;
diff --git a/style.css b/style.css
index 77cb8d4..0d562a5 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,86 @@
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #121010;
+}
+
 #root {
-  color: red;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  padding: 20px;
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin: 20px 0 10px 0;
+}
+
+input[type="text"],
+select {
+  padding: 10px 15px;
+  width: 30%;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background-color: #1a0a0a;
+  color: #f5ede0;
+  font-size: 15px;
+  cursor: pointer;
+  outline: none;
+}
+
+input[type="text"]::placeholder {
+  color: rgba(248, 237, 224, 0.5);
+}
+
+article {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
+  background-color: #4a0e1e;
+}
+
+article img {
+  width: 100%;
+  border-radius: 8px;
+}
+
+article h3 {
+  border-radius: 6px;
+  padding: 8px;
+  background-color: #1a0a0a;
+  font-size: 15px;
+  margin-bottom: 10px;
+  color: #f5ede0;
+}
+
+article p {
+  color: #e8d5c4;
+  font-size: 13px;
+  line-height: 1.6;
+  opacity: 0.85;
+}
+
+footer {
+  color: #e8d5c4;
+  text-align: center;
+  padding: 20px;
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+footer a {
+  color: #f5ede0;
+}
+
+.count-display {
+  text-align: center;
+  color: #e8d5c4;
+  font-size: 14px;
+  margin: 0 0 10px 0;
 }

From 4f7da4b344a093c724ae0c16cd23c5ab5f9fa571 Mon Sep 17 00:00:00 2001
From: joanne342 <130585013+joanne342@users.noreply.github.com>
Date: Fri, 14 Aug 2026 15:18:09 +0100
Subject: [PATCH 03/14] White text for search box

---
 style.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/style.css b/style.css
index 0d562a5..accf0d4 100644
--- a/style.css
+++ b/style.css
@@ -84,3 +84,23 @@ footer a {
   font-size: 14px;
   margin: 0 0 10px 0;
 }
+
+.search-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin: 20px 0;
+  color: #ffffff;
+}
+
+#search-input {
+  padding: 8px 12px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+#search-count {
+  color: #ffffff;
+  font-size: 0.95rem;
+}

From 89b6f96702a8d959154dee97674713641d768789 Mon Sep 17 00:00:00 2001
From: joanne342 <130585013+joanne342@users.noreply.github.com>
Date: Fri, 14 Aug 2026 15:20:23 +0100
Subject: [PATCH 04/14] added search bar and count container

---
 index.html | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/index.html b/index.html
index 2d2c55a..c3d73b8 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,18 @@
   </head>
 
   <body>
+    <header class="search-container">
+      <input
+        type="text"
+        id="search-input"
+        placeholder="Search episodes..."
+        aria-label="Search episodes"
+      />
+      <span id="search-count"></span>
+    </header>
+
     <div id="root"></div>
+
     <template id="episodes-template">
       <article class="movie-card">
         <h3 class="episode-title"></h3>

From 09cb001f80e3fb6e3d077135525c478e459fcc65 Mon Sep 17 00:00:00 2001
From: joanne342 <130585013+joanne342@users.noreply.github.com>
Date: Fri, 14 Aug 2026 15:23:56 +0100
Subject: [PATCH 05/14] added search functionality

---
 script.js | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index c85a9df..a67457f 100644
--- a/script.js
+++ b/script.js
@@ -1,19 +1,53 @@
-//You can edit ALL of the code here
 function setup() {
   const allEpisodes = getAllEpisodes();
+  const searchInput = document.getElementById("search-input");
+  const searchCount = document.getElementById("search-count");
+
+  // Helper to update the match counter text
+  function updateCount(matchCount) {
+    if (searchCount) {
+      searchCount.textContent = `Displaying ${matchCount}/${allEpisodes.length} episodes`;
+    }
+  }
+
+  // Initial render with all episodes
   makePageForEpisodes(allEpisodes);
+  updateCount(allEpisodes.length);
+
+  // Live search listener
+  searchInput.addEventListener("input", (event) => {
+    const searchTerm = event.target.value.toLowerCase().trim();
+
+    const filteredEpisodes = allEpisodes.filter((episode) => {
+      const nameMatch = episode.name.toLowerCase().includes(searchTerm);
+      // Safe check in case summary is null or undefined
+      const summaryMatch = episode.summary
+        ? episode.summary.toLowerCase().includes(searchTerm)
+        : false;
+
+      return nameMatch || summaryMatch;
+    });
+
+    makePageForEpisodes(filteredEpisodes);
+    updateCount(filteredEpisodes.length);
+  });
 }
 
 function makePageForEpisodes(episodeList) {
   const rootElem = document.getElementById("root");
   const template = document.getElementById("episodes-template");
 
+  // Clear existing episodes before rendering filtered list
+  rootElem.innerHTML = "";
+
   episodeList.forEach((episode) => {
     const card = template.content.cloneNode(true);
     const image = card.querySelector(".episode-image");
-    image.src = episode.image.medium;
+    
+    image.src = episode.image ? episode.image.medium : "";
     image.alt = episode.name;
     card.querySelector(".episode-title").textContent = episode.name;
+
     const season = String(episode.season).padStart(2, "0");
     const number = String(episode.number).padStart(2, "0");
     card.querySelector(".episode-season").textContent = `S${season}E${number}`;

From d3c61c38ec2dbc1ca450f8b5a16e26b59d2e8683 Mon Sep 17 00:00:00 2001
From: joanne342 <130585013+joanne342@users.noreply.github.com>
Date: Fri, 14 Aug 2026 16:09:04 +0100
Subject: [PATCH 06/14] added episode selector

---
 index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.html b/index.html
index c3d73b8..a9a787c 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,9 @@
 
   <body>
     <header class="search-container">
+
+      <select id="episode-select" aria-label="Select an episode"></select>
+
       <input
         type="text"
         id="search-input"
@@ -37,6 +40,7 @@ <h3 class="episode-title"></h3>
 
     <!-- Loads YOUR javascript code -->
     <script src="script.js"></script>
+
     <footer>
       Data sourced from
       <a href="https://tvmaze.com">TVMaze.com (https://tvmaze.com/)</a>

From 37088dab4ffc5444231145d55483b97543a1d7f2 Mon Sep 17 00:00:00 2001
From: joanne342 <130585013+joanne342@users.noreply.github.com>
Date: Fri, 14 Aug 2026 16:10:53 +0100
Subject: [PATCH 07/14] added episode selector

---
 script.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/script.js b/script.js
index a67457f..8da77ce 100644
--- a/script.js
+++ b/script.js
@@ -1,7 +1,15 @@
+// Helper to format season and episode numbers into "S01E01" format
+function formatEpisodeCode(episode) {
+  const season = String(episode.season).padStart(2, "0");
+  const number = String(episode.number).padStart(2, "0");
+  return `S${season}E${number}`;
+}
+
 function setup() {
   const allEpisodes = getAllEpisodes();
   const searchInput = document.getElementById("search-input");
   const searchCount = document.getElementById("search-count");
+  const episodeSelect = document.getElementById("episode-select");
 
   // Helper to update the match counter text
   function updateCount(matchCount) {
@@ -10,7 +18,23 @@ function setup() {
     }
   }
 
-  // Initial render with all episodes
+  // Populates the <select> element with all episode options
+  function populateEpisodeSelect(episodes) {
+    if (!episodeSelect) return;
+
+    // Reset select element and add default "All Episodes" option
+    episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
+
+    episodes.forEach((episode) => {
+      const option = document.createElement("option");
+      option.value = episode.id;
+      option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
+      episodeSelect.appendChild(option);
+    });
+  }
+
+  // Initial render
+  populateEpisodeSelect(allEpisodes);
   makePageForEpisodes(allEpisodes);
   updateCount(allEpisodes.length);
 
@@ -18,9 +42,11 @@ function setup() {
   searchInput.addEventListener("input", (event) => {
     const searchTerm = event.target.value.toLowerCase().trim();
 
+    // Reset dropdown selection back to "All Episodes" while typing in search
+    if (episodeSelect) episodeSelect.value = "ALL";
+
     const filteredEpisodes = allEpisodes.filter((episode) => {
       const nameMatch = episode.name.toLowerCase().includes(searchTerm);
-      // Safe check in case summary is null or undefined
       const summaryMatch = episode.summary
         ? episode.summary.toLowerCase().includes(searchTerm)
         : false;
@@ -31,26 +57,45 @@ function setup() {
     makePageForEpisodes(filteredEpisodes);
     updateCount(filteredEpisodes.length);
   });
+
+  // Dropdown selection listener
+  if (episodeSelect) {
+    episodeSelect.addEventListener("change", (event) => {
+      const selectedId = event.target.value;
+
+      // Clear search input text when picking from dropdown
+      if (searchInput) searchInput.value = "";
+
+      if (selectedId === "ALL") {
+        makePageForEpisodes(allEpisodes);
+        updateCount(allEpisodes.length);
+      } else {
+        const selectedEpisode = allEpisodes.filter(
+          (episode) => episode.id === Number(selectedId)
+        );
+        makePageForEpisodes(selectedEpisode);
+        updateCount(selectedEpisode.length);
+      }
+    });
+  }
 }
 
 function makePageForEpisodes(episodeList) {
   const rootElem = document.getElementById("root");
   const template = document.getElementById("episodes-template");
 
-  // Clear existing episodes before rendering filtered list
   rootElem.innerHTML = "";
 
   episodeList.forEach((episode) => {
     const card = template.content.cloneNode(true);
     const image = card.querySelector(".episode-image");
-    
+
     image.src = episode.image ? episode.image.medium : "";
     image.alt = episode.name;
     card.querySelector(".episode-title").textContent = episode.name;
 
-    const season = String(episode.season).padStart(2, "0");
-    const number = String(episode.number).padStart(2, "0");
-    card.querySelector(".episode-season").textContent = `S${season}E${number}`;
+    // Using the helper function here too
+    card.querySelector(".episode-season").textContent = formatEpisodeCode(episode);
 
     card.querySelector(".episode-summery").innerHTML = episode.summary;
     rootElem.appendChild(card);

From 8add72e76359228decc19710af83d395ddd03aa0 Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Sat, 15 Aug 2026 21:03:30 +0100
Subject: [PATCH 08/14] added fetching API, added  statement that tell loading
 episode, added error statement for error

---
 script.js | 151 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 77 insertions(+), 74 deletions(-)

diff --git a/script.js b/script.js
index 8da77ce..8a0bd55 100644
--- a/script.js
+++ b/script.js
@@ -5,98 +5,101 @@ function formatEpisodeCode(episode) {
   return `S${season}E${number}`;
 }
 
-function setup() {
-  const allEpisodes = getAllEpisodes();
+async function setup() {
   const searchInput = document.getElementById("search-input");
   const searchCount = document.getElementById("search-count");
   const episodeSelect = document.getElementById("episode-select");
 
-  // Helper to update the match counter text
-  function updateCount(matchCount) {
-    if (searchCount) {
-      searchCount.textContent = `Displaying ${matchCount}/${allEpisodes.length} episodes`;
-    }
-  }
-
-  // Populates the <select> element with all episode options
-  function populateEpisodeSelect(episodes) {
-    if (!episodeSelect) return;
-
-    // Reset select element and add default "All Episodes" option
-    episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
-
-    episodes.forEach((episode) => {
-      const option = document.createElement("option");
-      option.value = episode.id;
-      option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
-      episodeSelect.appendChild(option);
-    });
+  // Show loading message
+  if (searchCount) {
+    searchCount.textContent = "Loading episodes...";
   }
-
-  // Initial render
-  populateEpisodeSelect(allEpisodes);
-  makePageForEpisodes(allEpisodes);
-  updateCount(allEpisodes.length);
-
-  // Live search listener
-  searchInput.addEventListener("input", (event) => {
-    const searchTerm = event.target.value.toLowerCase().trim();
-
-    // Reset dropdown selection back to "All Episodes" while typing in search
-    if (episodeSelect) episodeSelect.value = "ALL";
-
-    const filteredEpisodes = allEpisodes.filter((episode) => {
-      const nameMatch = episode.name.toLowerCase().includes(searchTerm);
-      const summaryMatch = episode.summary
-        ? episode.summary.toLowerCase().includes(searchTerm)
-        : false;
-
-      return nameMatch || summaryMatch;
-    });
-
-    makePageForEpisodes(filteredEpisodes);
-    updateCount(filteredEpisodes.length);
-  });
-
-  // Dropdown selection listener
-  if (episodeSelect) {
-    episodeSelect.addEventListener("change", (event) => {
-      const selectedId = event.target.value;
-
-      // Clear search input text when picking from dropdown
-      if (searchInput) searchInput.value = "";
-
-      if (selectedId === "ALL") {
-        makePageForEpisodes(allEpisodes);
-        updateCount(allEpisodes.length);
-      } else {
-        const selectedEpisode = allEpisodes.filter(
-          (episode) => episode.id === Number(selectedId)
-        );
-        makePageForEpisodes(selectedEpisode);
-        updateCount(selectedEpisode.length);
+  try {
+    // Fetch episodes from the API ONCE
+    const response = await fetch("https://api.tvmaze.com/shows/82/episodes");
+    if (!response.ok) {
+      throw new Error("Failed to load episodes");
+    }
+    const allEpisodes = await response.json();
+    // Helper to update the match counter text
+    function updateCount(matchCount) {
+      if (searchCount) {
+        searchCount.textContent = `Displaying ${matchCount}/${allEpisodes.length} episodes`;
       }
-    });
+    }
+    // Populates the <select> element with all episode options
+    function populateEpisodeSelect(episodes) {
+      if (!episodeSelect) return;
+      episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
+      episodes.forEach((episode) => {
+        const option = document.createElement("option");
+        option.value = episode.id;
+        option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
+        episodeSelect.appendChild(option);
+      });
+    }
+    // Initial render
+    populateEpisodeSelect(allEpisodes);
+    makePageForEpisodes(allEpisodes);
+    updateCount(allEpisodes.length);
+    // Live search listener
+    if (searchInput) {
+      searchInput.addEventListener("input", (event) => {
+        const searchTerm = event.target.value.toLowerCase().trim();
+        if (episodeSelect) {
+          episodeSelect.value = "ALL";
+        }
+        const filteredEpisodes = allEpisodes.filter((episode) => {
+          const nameMatch = episode.name.toLowerCase().includes(searchTerm);
+          const summaryMatch = episode.summary
+            ? episode.summary.toLowerCase().includes(searchTerm)
+            : false;
+          return nameMatch || summaryMatch;
+        });
+        makePageForEpisodes(filteredEpisodes);
+        updateCount(filteredEpisodes.length);
+      });
+    }
+    // Dropdown selection listener
+    if (episodeSelect) {
+      episodeSelect.addEventListener("change", (event) => {
+        const selectedId = event.target.value;
+        if (searchInput) {
+          searchInput.value = "";
+        }
+        if (selectedId === "ALL") {
+          makePageForEpisodes(allEpisodes);
+          updateCount(allEpisodes.length);
+        } else {
+          const selectedEpisode = allEpisodes.filter(
+            (episode) => episode.id === Number(selectedId),
+          );
+          makePageForEpisodes(selectedEpisode);
+          updateCount(selectedEpisode.length);
+        }
+      });
+    }
+  } catch (error) {
+    // Show error to the USER, not just the console
+    if (searchCount) {
+      searchCount.textContent =
+        "Sorry, there was a problem loading the episodes.";
+    }
+    console.error(error);
   }
 }
-
 function makePageForEpisodes(episodeList) {
   const rootElem = document.getElementById("root");
   const template = document.getElementById("episodes-template");
-
   rootElem.innerHTML = "";
-
   episodeList.forEach((episode) => {
     const card = template.content.cloneNode(true);
     const image = card.querySelector(".episode-image");
-
     image.src = episode.image ? episode.image.medium : "";
     image.alt = episode.name;
     card.querySelector(".episode-title").textContent = episode.name;
-
-    // Using the helper function here too
-    card.querySelector(".episode-season").textContent = formatEpisodeCode(episode);
-
+    card.querySelector(".episode-season").textContent =
+      formatEpisodeCode(episode);
     card.querySelector(".episode-summery").innerHTML = episode.summary;
     rootElem.appendChild(card);
   });

From 4927cdef09c7564a855fb0f6dace75e761fbb881 Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Sun, 16 Aug 2026 00:10:32 +0100
Subject: [PATCH 09/14] Improve episode search functionality

---
 script.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index 8a0bd55..085f832 100644
--- a/script.js
+++ b/script.js
@@ -46,20 +46,29 @@ async function setup() {
     if (searchInput) {
       searchInput.addEventListener("input", (event) => {
         const searchTerm = event.target.value.toLowerCase().trim();
+
         if (episodeSelect) {
           episodeSelect.value = "ALL";
         }
+
         const filteredEpisodes = allEpisodes.filter((episode) => {
           const nameMatch = episode.name.toLowerCase().includes(searchTerm);
+
           const summaryMatch = episode.summary
-            ? episode.summary.toLowerCase().includes(searchTerm)
+            ? episode.summary
+                .replace(/<[^>]*>/g, "")
+                .toLowerCase()
+                .includes(searchTerm)
             : false;
+
           return nameMatch || summaryMatch;
         });
+
         makePageForEpisodes(filteredEpisodes);
         updateCount(filteredEpisodes.length);
       });
     }
+
     // Dropdown selection listener
     if (episodeSelect) {
       episodeSelect.addEventListener("change", (event) => {

From 9f59329f60f0b8bd5b42a96bb8df5c188f185f5e Mon Sep 17 00:00:00 2001
From: joanne342 <130585013+joanne342@users.noreply.github.com>
Date: Sun, 16 Aug 2026 14:26:01 +0100
Subject: [PATCH 10/14] Get all TV shows instead of one

---
 script.js | 325 +++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 248 insertions(+), 77 deletions(-)

diff --git a/script.js b/script.js
index 085f832..09fca29 100644
--- a/script.js
+++ b/script.js
@@ -5,113 +5,284 @@ function formatEpisodeCode(episode) {
   return `S${season}E${number}`;
 }
 
+// Cache episode requests so each episode URL is fetched only once
+const episodeCache = {};
+
+function getEpisodesForShow(showId) {
+  if (!episodeCache[showId]) {
+    episodeCache[showId] = fetch(
+      `https://api.tvmaze.com/shows/${showId}/episodes`
+    ).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to load episodes for show ID ${showId}`);
+      }
+
+      return response.json();
+    });
+  }
+
+  return episodeCache[showId];
+}
+
+// Creates or gets the .controls container
+function getControlsContainer() {
+  let controls = document.querySelector(".controls");
+
+  if (!controls) {
+    controls = document.createElement("div");
+    controls.className = "controls";
+
+    const root = document.getElementById("root");
+    root.parentNode.insertBefore(controls, root);
+  }
+
+  return controls;
+}
+
 async function setup() {
+  const controls = getControlsContainer();
+
+  // Create the controls once
+  controls.innerHTML = `
+    <select id="show-select"></select>
+    <select id="episode-select"></select>
+    <input id="search-input" type="text" placeholder="Search episodes..." />
+    <span id="search-count">Loading shows...</span>
+  `;
+
+  const showSelect = document.getElementById("show-select");
+  const episodeSelect = document.getElementById("episode-select");
   const searchInput = document.getElementById("search-input");
   const searchCount = document.getElementById("search-count");
-  const episodeSelect = document.getElementById("episode-select");
 
-  // Show loading message
-  if (searchCount) {
-    searchCount.textContent = "Loading episodes...";
-  }
+  // Episodes belonging to the currently selected show
+  let currentEpisodes = [];
+
+  // Name of the currently selected show
+  let currentShowName = "";
+
   try {
-    // Fetch episodes from the API ONCE
-    const response = await fetch("https://api.tvmaze.com/shows/82/episodes");
-    if (!response.ok) {
-      throw new Error("Failed to load episodes");
+    // Fetch all shows
+    const showsResponse = await fetch("https://api.tvmaze.com/shows");
+
+    if (!showsResponse.ok) {
+      throw new Error("Failed to load shows");
     }
-    const allEpisodes = await response.json();
-    // Helper to update the match counter text
-    function updateCount(matchCount) {
-      if (searchCount) {
-        searchCount.textContent = `Displaying ${matchCount}/${allEpisodes.length} episodes`;
-      }
+
+    const allShows = await showsResponse.json();
+
+    // Sort alphabetically, ignoring case
+    allShows.sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, {
+        sensitivity: "base",
+      })
+    );
+
+    // Add shows to show dropdown
+    allShows.forEach((show) => {
+      const option = document.createElement("option");
+
+      option.value = show.id;
+      option.textContent = show.name;
+
+      showSelect.appendChild(option);
+    });
+
+    // Update the count shown beside the controls
+    function updateCount(numberOfEpisodes) {
+      searchCount.textContent =
+        `Displaying ${numberOfEpisodes}/${currentEpisodes.length} episodes`;
     }
-    // Populates the <select> element with all episode options
+
+    // Populate the episode dropdown for the current show
     function populateEpisodeSelect(episodes) {
-      if (!episodeSelect) return;
-      episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
+      episodeSelect.innerHTML =
+        `<option value="ALL">All Episodes</option>`;
+
       episodes.forEach((episode) => {
         const option = document.createElement("option");
+
         option.value = episode.id;
-        option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
+        option.textContent =
+          `${formatEpisodeCode(episode)} - ${episode.name}`;
+
         episodeSelect.appendChild(option);
       });
     }
-    // Initial render
-    populateEpisodeSelect(allEpisodes);
-    makePageForEpisodes(allEpisodes);
-    updateCount(allEpisodes.length);
-    // Live search listener
-    if (searchInput) {
-      searchInput.addEventListener("input", (event) => {
-        const searchTerm = event.target.value.toLowerCase().trim();
-
-        if (episodeSelect) {
-          episodeSelect.value = "ALL";
+
+    // Load episodes for a show
+    async function loadShow(showId) {
+      searchCount.textContent = "Loading episodes...";
+
+      try {
+        // Find the selected show
+        const selectedShow = allShows.find(
+          (show) => show.id === Number(showId)
+        );
+
+        if (!selectedShow) {
+          return;
         }
 
-        const filteredEpisodes = allEpisodes.filter((episode) => {
-          const nameMatch = episode.name.toLowerCase().includes(searchTerm);
+        currentShowName = selectedShow.name;
 
-          const summaryMatch = episode.summary
-            ? episode.summary
-                .replace(/<[^>]*>/g, "")
-                .toLowerCase()
-                .includes(searchTerm)
-            : false;
+        // Get episodes from cache or fetch them
+        currentEpisodes = await getEpisodesForShow(showId);
 
-          return nameMatch || summaryMatch;
-        });
+        // Clear search when changing shows
+        searchInput.value = "";
 
-        makePageForEpisodes(filteredEpisodes);
-        updateCount(filteredEpisodes.length);
-      });
+        // Reset episode dropdown
+        populateEpisodeSelect(currentEpisodes);
+
+        // Display the new show's episodes
+        makePageForEpisodes(
+          currentEpisodes,
+          currentShowName
+        );
+
+        updateCount(currentEpisodes.length);
+      } catch (error) {
+        searchCount.textContent = "Error loading episodes.";
+        console.error(error);
+      }
     }
 
-    // Dropdown selection listener
-    if (episodeSelect) {
-      episodeSelect.addEventListener("change", (event) => {
-        const selectedId = event.target.value;
-        if (searchInput) {
-          searchInput.value = "";
-        }
-        if (selectedId === "ALL") {
-          makePageForEpisodes(allEpisodes);
-          updateCount(allEpisodes.length);
-        } else {
-          const selectedEpisode = allEpisodes.filter(
-            (episode) => episode.id === Number(selectedId),
-          );
-          makePageForEpisodes(selectedEpisode);
-          updateCount(selectedEpisode.length);
-        }
-      });
+    // Load the first show when the page opens
+    if (allShows.length > 0) {
+      await loadShow(allShows[0].id);
     }
+
+    // Show dropdown
+    showSelect.addEventListener("change", async (event) => {
+      await loadShow(event.target.value);
+    });
+
+    // Search
+    searchInput.addEventListener("input", (event) => {
+      const searchTerm = event.target.value
+        .toLowerCase()
+        .trim();
+
+      // Reset episode selector when searching
+      episodeSelect.value = "ALL";
+
+      const filteredEpisodes = currentEpisodes.filter((episode) => {
+        const nameMatch = episode.name
+          .toLowerCase()
+          .includes(searchTerm);
+
+        const summaryMatch = episode.summary
+          ? episode.summary
+              .replace(/<[^>]*>/g, "")
+              .toLowerCase()
+              .includes(searchTerm)
+          : false;
+
+        return nameMatch || summaryMatch;
+      });
+
+      makePageForEpisodes(
+        filteredEpisodes,
+        currentShowName
+      );
+
+      updateCount(filteredEpisodes.length);
+    });
+
+    // Episode dropdown
+    episodeSelect.addEventListener("change", (event) => {
+      const selectedId = event.target.value;
+
+      // Clear search when selecting an episode
+      searchInput.value = "";
+
+      if (selectedId === "ALL") {
+        makePageForEpisodes(
+          currentEpisodes,
+          currentShowName
+        );
+
+        updateCount(currentEpisodes.length);
+        return;
+      }
+
+      const selectedEpisode = currentEpisodes.find(
+        (episode) => episode.id === Number(selectedId)
+      );
+
+      if (selectedEpisode) {
+        makePageForEpisodes(
+          [selectedEpisode],
+          currentShowName
+        );
+
+        updateCount(1);
+      }
+    });
   } catch (error) {
-    // Show error to the USER, not just the console
-    if (searchCount) {
-      searchCount.textContent =
-        "Sorry, there was a problem loading the episodes.";
-    }
+    searchCount.textContent = "Failed to load TV shows.";
     console.error(error);
   }
 }
-function makePageForEpisodes(episodeList) {
+
+// Render episode cards
+function makePageForEpisodes(episodeList, showName) {
   const rootElem = document.getElementById("root");
-  const template = document.getElementById("episodes-template");
+
   rootElem.innerHTML = "";
+
+  // Show heading
+  const heading = document.createElement("h1");
+  heading.textContent = `${showName} Episodes`;
+  rootElem.appendChild(heading);
+
+  // Show episode count
+  const count = document.createElement("p");
+  count.textContent = `Displaying ${episodeList.length} episodes`;
+  rootElem.appendChild(count);
+
+  // TVMaze credit
+  const credit = document.createElement("p");
+
+  credit.innerHTML =
+    'Data originally from <a href="https://tvmaze.com/" target="_blank" rel="noopener noreferrer">TVMaze.com</a>';
+
+  rootElem.appendChild(credit);
+
+  // Episode cards container
+  const container = document.createElement("div");
+  container.className = "episodes-container";
+
   episodeList.forEach((episode) => {
-    const card = template.content.cloneNode(true);
-    const image = card.querySelector(".episode-image");
-    image.src = episode.image ? episode.image.medium : "";
-    image.alt = episode.name;
-    card.querySelector(".episode-title").textContent = episode.name;
-    card.querySelector(".episode-season").textContent =
-      formatEpisodeCode(episode);
-    card.querySelector(".episode-summery").innerHTML = episode.summary;
-    rootElem.appendChild(card);
+    const card = document.createElement("article");
+    card.className = "episode-card";
+
+    card.innerHTML = `
+      <h2>${episode.name} - ${formatEpisodeCode(episode)}</h2>
+
+      <img
+        src="${episode.image?.medium || ""}"
+        alt="${episode.name}"
+      >
+
+      <div class="episode-summary">
+        ${episode.summary || ""}
+      </div>
+
+      ${
+        episode.url
+          ? `<a href="${episode.url}" target="_blank" rel="noopener noreferrer">
+               View on TVMaze
+             </a>`
+          : ""
+      }
+    `;
+
+    container.appendChild(card);
   });
+
+  rootElem.appendChild(container);
 }
 
 window.onload = setup;

From 048c076458573b52fe36358af000104a5d688151 Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Mon, 17 Aug 2026 13:46:13 +0100
Subject: [PATCH 11/14] refactoring code and creating css features

---
 index.html |  27 +++++------
 script.js  | 139 ++++++++++++++---------------------------------------
 style.css  |  51 +++++++++++---------
 3 files changed, 77 insertions(+), 140 deletions(-)

diff --git a/index.html b/index.html
index a9a787c..ca9b5de 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,9 @@
     <link href="style.css" rel="stylesheet" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   </head>
-
   <body>
     <header class="search-container">
-
+      <select id="show-select" aria-label="Select a show"></select>
       <select id="episode-select" aria-label="Select an episode"></select>
 
       <input
@@ -21,29 +20,25 @@
         placeholder="Search episodes..."
         aria-label="Search episodes"
       />
-      <span id="search-count"></span>
+
+      <span id="search-count">Loading shows...</span>
     </header>
 
     <div id="root"></div>
-
     <template id="episodes-template">
-      <article class="movie-card">
-        <h3 class="episode-title"></h3>
-        <p class="episode-season"></p>
+      <article class="episode-card">
+        <h2 class="episode-title"></h2>
         <img class="episode-image" src="" alt="" />
-        <p class="episode-summery"></p>
+        <div class="episode-summary"></div>
+        <button class="episode-link" type="button">View on TVMaze</button>
       </article>
     </template>
-
-    <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
-    <script src="episodes.js"></script>
-
-    <!-- Loads YOUR javascript code -->
-    <script src="script.js"></script>
-
     <footer>
       Data sourced from
-      <a href="https://tvmaze.com">TVMaze.com (https://tvmaze.com/)</a>
+      <a href="https://tvmaze.com" target="_blank" rel="noopener noreferrer">
+        TVMaze.com
+      </a>
     </footer>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index 09fca29..5c32994 100644
--- a/script.js
+++ b/script.js
@@ -2,6 +2,7 @@
 function formatEpisodeCode(episode) {
   const season = String(episode.season).padStart(2, "0");
   const number = String(episode.number).padStart(2, "0");
+
   return `S${season}E${number}`;
 }
 
@@ -11,7 +12,7 @@ const episodeCache = {};
 function getEpisodesForShow(showId) {
   if (!episodeCache[showId]) {
     episodeCache[showId] = fetch(
-      `https://api.tvmaze.com/shows/${showId}/episodes`
+      `https://api.tvmaze.com/shows/${showId}/episodes`,
     ).then((response) => {
       if (!response.ok) {
         throw new Error(`Failed to load episodes for show ID ${showId}`);
@@ -24,37 +25,16 @@ function getEpisodesForShow(showId) {
   return episodeCache[showId];
 }
 
-// Creates or gets the .controls container
-function getControlsContainer() {
-  let controls = document.querySelector(".controls");
-
-  if (!controls) {
-    controls = document.createElement("div");
-    controls.className = "controls";
-
-    const root = document.getElementById("root");
-    root.parentNode.insertBefore(controls, root);
-  }
-
-  return controls;
-}
-
 async function setup() {
-  const controls = getControlsContainer();
-
-  // Create the controls once
-  controls.innerHTML = `
-    <select id="show-select"></select>
-    <select id="episode-select"></select>
-    <input id="search-input" type="text" placeholder="Search episodes..." />
-    <span id="search-count">Loading shows...</span>
-  `;
-
+  // Get the elements from the HTML
   const showSelect = document.getElementById("show-select");
   const episodeSelect = document.getElementById("episode-select");
   const searchInput = document.getElementById("search-input");
   const searchCount = document.getElementById("search-count");
 
+  // Get the episode template from the HTML
+  const template = document.getElementById("episodes-template");
+
   // Episodes belonging to the currently selected show
   let currentEpisodes = [];
 
@@ -75,7 +55,7 @@ async function setup() {
     allShows.sort((a, b) =>
       a.name.localeCompare(b.name, undefined, {
         sensitivity: "base",
-      })
+      }),
     );
 
     // Add shows to show dropdown
@@ -90,21 +70,18 @@ async function setup() {
 
     // Update the count shown beside the controls
     function updateCount(numberOfEpisodes) {
-      searchCount.textContent =
-        `Displaying ${numberOfEpisodes}/${currentEpisodes.length} episodes`;
+      searchCount.textContent = `Displaying ${numberOfEpisodes}/${currentEpisodes.length} episodes`;
     }
 
     // Populate the episode dropdown for the current show
     function populateEpisodeSelect(episodes) {
-      episodeSelect.innerHTML =
-        `<option value="ALL">All Episodes</option>`;
+      episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
 
       episodes.forEach((episode) => {
         const option = document.createElement("option");
 
         option.value = episode.id;
-        option.textContent =
-          `${formatEpisodeCode(episode)} - ${episode.name}`;
+        option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
 
         episodeSelect.appendChild(option);
       });
@@ -117,7 +94,7 @@ async function setup() {
       try {
         // Find the selected show
         const selectedShow = allShows.find(
-          (show) => show.id === Number(showId)
+          (show) => show.id === Number(showId),
         );
 
         if (!selectedShow) {
@@ -136,10 +113,7 @@ async function setup() {
         populateEpisodeSelect(currentEpisodes);
 
         // Display the new show's episodes
-        makePageForEpisodes(
-          currentEpisodes,
-          currentShowName
-        );
+        makePageForEpisodes(currentEpisodes, currentShowName);
 
         updateCount(currentEpisodes.length);
       } catch (error) {
@@ -160,17 +134,11 @@ async function setup() {
 
     // Search
     searchInput.addEventListener("input", (event) => {
-      const searchTerm = event.target.value
-        .toLowerCase()
-        .trim();
-
+      const searchTerm = event.target.value.toLowerCase().trim();
       // Reset episode selector when searching
       episodeSelect.value = "ALL";
-
       const filteredEpisodes = currentEpisodes.filter((episode) => {
-        const nameMatch = episode.name
-          .toLowerCase()
-          .includes(searchTerm);
+        const nameMatch = episode.name.toLowerCase().includes(searchTerm);
 
         const summaryMatch = episode.summary
           ? episode.summary
@@ -182,10 +150,7 @@ async function setup() {
         return nameMatch || summaryMatch;
       });
 
-      makePageForEpisodes(
-        filteredEpisodes,
-        currentShowName
-      );
+      makePageForEpisodes(filteredEpisodes, currentShowName);
 
       updateCount(filteredEpisodes.length);
     });
@@ -198,24 +163,18 @@ async function setup() {
       searchInput.value = "";
 
       if (selectedId === "ALL") {
-        makePageForEpisodes(
-          currentEpisodes,
-          currentShowName
-        );
+        makePageForEpisodes(currentEpisodes, currentShowName);
 
         updateCount(currentEpisodes.length);
         return;
       }
 
       const selectedEpisode = currentEpisodes.find(
-        (episode) => episode.id === Number(selectedId)
+        (episode) => episode.id === Number(selectedId),
       );
 
       if (selectedEpisode) {
-        makePageForEpisodes(
-          [selectedEpisode],
-          currentShowName
-        );
+        makePageForEpisodes([selectedEpisode], currentShowName);
 
         updateCount(1);
       }
@@ -226,59 +185,35 @@ async function setup() {
   }
 }
 
+// Render episode cards
 // Render episode cards
 function makePageForEpisodes(episodeList, showName) {
   const rootElem = document.getElementById("root");
-
+  const template = document.getElementById("episodes-template");
   rootElem.innerHTML = "";
-
-  // Show heading
   const heading = document.createElement("h1");
   heading.textContent = `${showName} Episodes`;
   rootElem.appendChild(heading);
-
-  // Show episode count
-  const count = document.createElement("p");
-  count.textContent = `Displaying ${episodeList.length} episodes`;
-  rootElem.appendChild(count);
-
-  // TVMaze credit
-  const credit = document.createElement("p");
-
-  credit.innerHTML =
-    'Data originally from <a href="https://tvmaze.com/" target="_blank" rel="noopener noreferrer">TVMaze.com</a>';
-
-  rootElem.appendChild(credit);
-
-  // Episode cards container
   const container = document.createElement("div");
   container.className = "episodes-container";
-
   episodeList.forEach((episode) => {
-    const card = document.createElement("article");
-    card.className = "episode-card";
-
-    card.innerHTML = `
-      <h2>${episode.name} - ${formatEpisodeCode(episode)}</h2>
-
-      <img
-        src="${episode.image?.medium || ""}"
-        alt="${episode.name}"
-      >
-
-      <div class="episode-summary">
-        ${episode.summary || ""}
-      </div>
-
-      ${
-        episode.url
-          ? `<a href="${episode.url}" target="_blank" rel="noopener noreferrer">
-               View on TVMaze
-             </a>`
-          : ""
-      }
-    `;
-
+    const card = template.content.cloneNode(true);
+    const title = card.querySelector(".episode-title");
+    const image = card.querySelector(".episode-image");
+    const summary = card.querySelector(".episode-summary");
+    const link = card.querySelector(".episode-link");
+    title.textContent = `${episode.name} - ${formatEpisodeCode(episode)}`;
+    image.src = episode.image?.medium || "";
+    image.alt = episode.name;
+    summary.innerHTML = episode.summary || "";
+    if (episode.url) {
+      link.addEventListener("click", () => {
+        window.open(episode.url, "_blank");
+      });
+    } else {
+      link.style.display = "none";
+    }
+    // Add the completed card to the container
     container.appendChild(card);
   });
 
diff --git a/style.css b/style.css
index accf0d4..30d8965 100644
--- a/style.css
+++ b/style.css
@@ -6,18 +6,25 @@ body {
 }
 
 #root {
+  padding: 20px;
+}
+.episodes-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
-  padding: 20px;
 }
-
-.controls {
+#root h1 {
+  color: #e8d5c4;
+  text-align: center;
+  margin-bottom: 20px;
+}
+.search-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
-  margin: 20px 0 10px 0;
+  gap: 15px;
+  margin: 20px 0;
+  color: #ffffff;
 }
 
 input[type="text"],
@@ -50,7 +57,7 @@ article img {
   border-radius: 8px;
 }
 
-article h3 {
+.episode-title {
   border-radius: 6px;
   padding: 8px;
   background-color: #1a0a0a;
@@ -59,13 +66,28 @@ article h3 {
   color: #f5ede0;
 }
 
-article p {
+.episode-summary {
   color: #e8d5c4;
   font-size: 13px;
   line-height: 1.6;
   opacity: 0.85;
 }
 
+.episode-link {
+  margin-top: 15px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background-color: #1a0a0a;
+  color: #f5ede0;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.episode-link:hover {
+  background-color: #6a1730;
+}
+
 footer {
   color: #e8d5c4;
   text-align: center;
@@ -78,21 +100,6 @@ footer a {
   color: #f5ede0;
 }
 
-.count-display {
-  text-align: center;
-  color: #e8d5c4;
-  font-size: 14px;
-  margin: 0 0 10px 0;
-}
-
-.search-container {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin: 20px 0;
-  color: #ffffff;
-}
-
 #search-input {
   padding: 8px 12px;
   font-size: 1rem;

From 0fd9bb5ffe4abc1ef2adfd5dc9848e4f5e9d6697 Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Mon, 17 Aug 2026 14:34:58 +0100
Subject: [PATCH 12/14] added a front page, added html element.

---
 index.html |  44 ++++++++-
 script.js  | 265 +++++++++++++++++++++++++++++++++--------------------
 style.css  | 132 ++++++++++++++++++++------
 3 files changed, 308 insertions(+), 133 deletions(-)

diff --git a/index.html b/index.html
index ca9b5de..5500656 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,21 @@
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   </head>
   <body>
-    <header class="search-container">
-      <select id="show-select" aria-label="Select a show"></select>
+    <header id="shows-controls" class="search-container">
+      <input
+        type="text"
+        id="show-search-input"
+        placeholder="Search shows..."
+        aria-label="Search shows"
+      />
+      <span id="show-search-count">Loading shows...</span>
+    </header>
+
+    <main id="shows-root"></main>
+
+    <header id="episodes-controls" class="search-container" hidden>
+      <button id="back-to-shows" type="button">Back to Shows</button>
+
       <select id="episode-select" aria-label="Select an episode"></select>
 
       <input
@@ -21,24 +34,47 @@
         aria-label="Search episodes"
       />
 
-      <span id="search-count">Loading shows...</span>
+      <span id="search-count">Loading episodes...</span>
     </header>
 
-    <div id="root"></div>
+    <main id="root"></main>
+
+    <template id="shows-template">
+      <article class="show-card">
+        <button class="show-button" type="button">
+          <h2 class="show-title"></h2>
+        </button>
+
+        <img class="show-image" src="" alt="" />
+
+        <div class="show-summary"></div>
+
+        <p class="show-genres"></p>
+        <p class="show-status"></p>
+        <p class="show-rating"></p>
+        <p class="show-runtime"></p>
+      </article>
+    </template>
+
     <template id="episodes-template">
       <article class="episode-card">
         <h2 class="episode-title"></h2>
+
         <img class="episode-image" src="" alt="" />
+
         <div class="episode-summary"></div>
+
         <button class="episode-link" type="button">View on TVMaze</button>
       </article>
     </template>
+
     <footer>
       Data sourced from
       <a href="https://tvmaze.com" target="_blank" rel="noopener noreferrer">
         TVMaze.com
       </a>
     </footer>
+
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index 5c32994..ea7697a 100644
--- a/script.js
+++ b/script.js
@@ -1,14 +1,24 @@
-// Helper to format season and episode numbers into "S01E01" format
 function formatEpisodeCode(episode) {
   const season = String(episode.season).padStart(2, "0");
   const number = String(episode.number).padStart(2, "0");
-
   return `S${season}E${number}`;
 }
 
-// Cache episode requests so each episode URL is fetched only once
+let allShowsCache = null;
 const episodeCache = {};
 
+async function getAllShows() {
+  if (!allShowsCache) {
+    allShowsCache = fetch("https://api.tvmaze.com/shows").then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to load shows");
+      }
+      return response.json();
+    });
+  }
+  return allShowsCache;
+}
+
 function getEpisodesForShow(showId) {
   if (!episodeCache[showId]) {
     episodeCache[showId] = fetch(
@@ -17,82 +27,74 @@ function getEpisodesForShow(showId) {
       if (!response.ok) {
         throw new Error(`Failed to load episodes for show ID ${showId}`);
       }
-
       return response.json();
     });
   }
-
   return episodeCache[showId];
 }
 
 async function setup() {
-  // Get the elements from the HTML
-  const showSelect = document.getElementById("show-select");
+  const showsRoot = document.getElementById("shows-root");
+  const showsControls = document.getElementById("shows-controls");
+  const showSearchInput = document.getElementById("show-search-input");
+  const showSearchCount = document.getElementById("show-search-count");
+
+  const episodesRoot = document.getElementById("root");
+  const episodesControls = document.getElementById("episodes-controls");
+  const backToShows = document.getElementById("back-to-shows");
   const episodeSelect = document.getElementById("episode-select");
   const searchInput = document.getElementById("search-input");
   const searchCount = document.getElementById("search-count");
 
-  // Get the episode template from the HTML
-  const template = document.getElementById("episodes-template");
+  const showsTemplate = document.getElementById("shows-template");
+  const episodesTemplate = document.getElementById("episodes-template");
 
-  // Episodes belonging to the currently selected show
   let currentEpisodes = [];
-
-  // Name of the currently selected show
   let currentShowName = "";
 
   try {
-    // Fetch all shows
-    const showsResponse = await fetch("https://api.tvmaze.com/shows");
-
-    if (!showsResponse.ok) {
-      throw new Error("Failed to load shows");
-    }
+    const allShows = await getAllShows();
 
-    const allShows = await showsResponse.json();
-
-    // Sort alphabetically, ignoring case
     allShows.sort((a, b) =>
       a.name.localeCompare(b.name, undefined, {
         sensitivity: "base",
       }),
     );
 
-    // Add shows to show dropdown
-    allShows.forEach((show) => {
-      const option = document.createElement("option");
-
-      option.value = show.id;
-      option.textContent = show.name;
-
-      showSelect.appendChild(option);
-    });
+    makePageForShows(allShows);
+    updateShowCount(allShows.length);
 
-    // Update the count shown beside the controls
-    function updateCount(numberOfEpisodes) {
-      searchCount.textContent = `Displaying ${numberOfEpisodes}/${currentEpisodes.length} episodes`;
+    function updateShowCount(numberOfShows) {
+      showSearchCount.textContent = `Displaying ${numberOfShows}/${allShows.length} shows`;
     }
 
-    // Populate the episode dropdown for the current show
-    function populateEpisodeSelect(episodes) {
-      episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
+    showSearchInput.addEventListener("input", (event) => {
+      const searchTerm = event.target.value.toLowerCase().trim();
 
-      episodes.forEach((episode) => {
-        const option = document.createElement("option");
+      const filteredShows = allShows.filter((show) => {
+        const nameMatch = show.name.toLowerCase().includes(searchTerm);
 
-        option.value = episode.id;
-        option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
+        const genresMatch = show.genres
+          .join(" ")
+          .toLowerCase()
+          .includes(searchTerm);
 
-        episodeSelect.appendChild(option);
+        const summaryMatch = show.summary
+          ? show.summary
+              .replace(/<[^>]*>/g, "")
+              .toLowerCase()
+              .includes(searchTerm)
+          : false;
+
+        return nameMatch || genresMatch || summaryMatch;
       });
-    }
 
-    // Load episodes for a show
-    async function loadShow(showId) {
-      searchCount.textContent = "Loading episodes...";
+      makePageForShows(filteredShows);
+      updateShowCount(filteredShows.length);
+    });
 
+    async function loadShow(showId) {
       try {
-        // Find the selected show
         const selectedShow = allShows.find(
           (show) => show.id === Number(showId),
         );
@@ -102,41 +104,49 @@ async function setup() {
         }
 
         currentShowName = selectedShow.name;
-
-        // Get episodes from cache or fetch them
         currentEpisodes = await getEpisodesForShow(showId);
 
-        // Clear search when changing shows
         searchInput.value = "";
-
-        // Reset episode dropdown
         populateEpisodeSelect(currentEpisodes);
 
-        // Display the new show's episodes
+        showsRoot.hidden = true;
+        showsControls.hidden = true;
+
+        episodesRoot.hidden = false;
+        episodesControls.hidden = false;
+
         makePageForEpisodes(currentEpisodes, currentShowName);
 
         updateCount(currentEpisodes.length);
+        window.scrollTo(0, 0);
       } catch (error) {
-        searchCount.textContent = "Error loading episodes.";
         console.error(error);
+        searchCount.textContent = "Error loading episodes.";
       }
     }
 
-    // Load the first show when the page opens
-    if (allShows.length > 0) {
-      await loadShow(allShows[0].id);
+    function populateEpisodeSelect(episodes) {
+      episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
+
+      episodes.forEach((episode) => {
+        const option = document.createElement("option");
+
+        option.value = episode.id;
+        option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
+
+        episodeSelect.appendChild(option);
+      });
     }
 
-    // Show dropdown
-    showSelect.addEventListener("change", async (event) => {
-      await loadShow(event.target.value);
-    });
+    function updateCount(numberOfEpisodes) {
+      searchCount.textContent = `Displaying ${numberOfEpisodes}/${currentEpisodes.length} episodes`;
+    }
 
-    // Search
     searchInput.addEventListener("input", (event) => {
       const searchTerm = event.target.value.toLowerCase().trim();
-      // Reset episode selector when searching
+
       episodeSelect.value = "ALL";
+
       const filteredEpisodes = currentEpisodes.filter((episode) => {
         const nameMatch = episode.name.toLowerCase().includes(searchTerm);
 
@@ -155,11 +165,9 @@ async function setup() {
       updateCount(filteredEpisodes.length);
     });
 
-    // Episode dropdown
     episodeSelect.addEventListener("change", (event) => {
       const selectedId = event.target.value;
 
-      // Clear search when selecting an episode
       searchInput.value = "";
 
       if (selectedId === "ALL") {
@@ -179,45 +187,104 @@ async function setup() {
         updateCount(1);
       }
     });
-  } catch (error) {
-    searchCount.textContent = "Failed to load TV shows.";
-    console.error(error);
-  }
-}
 
-// Render episode cards
-// Render episode cards
-function makePageForEpisodes(episodeList, showName) {
-  const rootElem = document.getElementById("root");
-  const template = document.getElementById("episodes-template");
-  rootElem.innerHTML = "";
-  const heading = document.createElement("h1");
-  heading.textContent = `${showName} Episodes`;
-  rootElem.appendChild(heading);
-  const container = document.createElement("div");
-  container.className = "episodes-container";
-  episodeList.forEach((episode) => {
-    const card = template.content.cloneNode(true);
-    const title = card.querySelector(".episode-title");
-    const image = card.querySelector(".episode-image");
-    const summary = card.querySelector(".episode-summary");
-    const link = card.querySelector(".episode-link");
-    title.textContent = `${episode.name} - ${formatEpisodeCode(episode)}`;
-    image.src = episode.image?.medium || "";
-    image.alt = episode.name;
-    summary.innerHTML = episode.summary || "";
-    if (episode.url) {
-      link.addEventListener("click", () => {
-        window.open(episode.url, "_blank");
+    backToShows.addEventListener("click", () => {
+      episodesRoot.hidden = true;
+      episodesControls.hidden = true;
+
+      showsRoot.hidden = false;
+      showsControls.hidden = false;
+
+      searchInput.value = "";
+      episodeSelect.value = "ALL";
+    });
+
+    function makePageForShows(showList) {
+      showsRoot.innerHTML = "";
+
+      const container = document.createElement("div");
+      container.className = "shows-container";
+
+      showList.forEach((show) => {
+        const card = showsTemplate.content.cloneNode(true);
+
+        const button = card.querySelector(".show-button");
+        const title = card.querySelector(".show-title");
+        const image = card.querySelector(".show-image");
+        const summary = card.querySelector(".show-summary");
+        const genres = card.querySelector(".show-genres");
+        const status = card.querySelector(".show-status");
+        const rating = card.querySelector(".show-rating");
+        const runtime = card.querySelector(".show-runtime");
+
+        title.textContent = show.name;
+
+        image.src = show.image?.medium || "";
+        image.alt = show.name;
+
+        summary.innerHTML = show.summary || "No summary available.";
+
+        genres.textContent = `Genres: ${show.genres.join(", ")}`;
+
+        status.textContent = `Status: ${show.status}`;
+
+        rating.textContent = `Rating: ${show.rating?.average || "N/A"}`;
+
+        runtime.textContent = `Runtime: ${show.runtime || "N/A"} minutes`;
+
+        button.addEventListener("click", () => {
+          loadShow(show.id);
+        });
+
+        container.appendChild(card);
+      });
+
+      showsRoot.appendChild(container);
+    }
+
+    function makePageForEpisodes(episodeList, showName) {
+      episodesRoot.innerHTML = "";
+
+      const heading = document.createElement("h1");
+      heading.textContent = `${showName} Episodes`;
+      episodesRoot.appendChild(heading);
+
+      const container = document.createElement("div");
+      container.className = "episodes-container";
+
+      episodeList.forEach((episode) => {
+        const card = episodesTemplate.content.cloneNode(true);
+
+        const title = card.querySelector(".episode-title");
+        const image = card.querySelector(".episode-image");
+        const summary = card.querySelector(".episode-summary");
+        const link = card.querySelector(".episode-link");
+
+        title.textContent = `${episode.name} - ${formatEpisodeCode(episode)}`;
+
+        image.src = episode.image?.medium || "";
+        image.alt = episode.name;
+
+        summary.innerHTML = episode.summary || "";
+
+        if (episode.url) {
+          link.addEventListener("click", () => {
+            window.open(episode.url, "_blank");
+          });
+        } else {
+          link.style.display = "none";
+        }
+
+        container.appendChild(card);
       });
-    } else {
-      link.style.display = "none";
+
+      episodesRoot.appendChild(container);
     }
-    // Add the completed card to the container
-    container.appendChild(card);
-  });
+  } catch (error) {
+    showSearchCount.textContent = "Failed to load TV shows.";
 
-  rootElem.appendChild(container);
+    console.error(error);
+  }
 }
 
 window.onload = setup;
diff --git a/style.css b/style.css
index 30d8965..d7e2411 100644
--- a/style.css
+++ b/style.css
@@ -4,19 +4,8 @@ body {
   box-sizing: border-box;
   background-color: #121010;
 }
-
-#root {
-  padding: 20px;
-}
-.episodes-container {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-}
-#root h1 {
-  color: #e8d5c4;
-  text-align: center;
-  margin-bottom: 20px;
+[hidden] {
+  display: none !important;
 }
 .search-container {
   display: flex;
@@ -44,7 +33,34 @@ input[type="text"]::placeholder {
   color: rgba(248, 237, 224, 0.5);
 }
 
-article {
+#search-input,
+#show-search-input {
+  padding: 8px 12px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+#search-count,
+#show-search-count {
+  color: #ffffff;
+  font-size: 0.95rem;
+}
+
+#shows-root,
+#root {
+  padding: 20px;
+}
+
+.shows-container,
+.episodes-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.show-card,
+.episode-card {
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   padding: 15px;
@@ -52,28 +68,59 @@ article {
   background-color: #4a0e1e;
 }
 
-article img {
+.show-image,
+.episode-image {
   width: 100%;
   border-radius: 8px;
 }
 
-.episode-title {
+.show-button {
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 10px;
+  border: none;
   border-radius: 6px;
-  padding: 8px;
   background-color: #1a0a0a;
-  font-size: 15px;
-  margin-bottom: 10px;
   color: #f5ede0;
+  cursor: pointer;
+}
+.show-button:hover {
+  background-color: #6a1730;
 }
 
+.show-title {
+  margin: 0;
+  font-size: 22px;
+  text-align: center;
+}
+
+.show-summary,
 .episode-summary {
   color: #e8d5c4;
   font-size: 13px;
   line-height: 1.6;
-  opacity: 0.85;
+  margin-top: 10px;
 }
 
-.episode-link {
+.show-genres,
+.show-status,
+.show-rating,
+.show-runtime {
+  color: #e8d5c4;
+  font-size: 13px;
+}
+
+.episode-title {
+  border-radius: 6px;
+  padding: 8px;
+  background-color: #1a0a0a;
+  font-size: 15px;
+  margin-bottom: 10px;
+  color: #f5ede0;
+}
+
+.episode-link,
+#back-to-shows {
   margin-top: 15px;
   padding: 8px 12px;
   border: none;
@@ -84,10 +131,17 @@ article img {
   cursor: pointer;
 }
 
-.episode-link:hover {
+.episode-link:hover,
+#back-to-shows:hover {
   background-color: #6a1730;
 }
 
+#shows-root h1,
+#root h1 {
+  color: #e8d5c4;
+  text-align: center;
+}
+
 footer {
   color: #e8d5c4;
   text-align: center;
@@ -100,14 +154,32 @@ footer a {
   color: #f5ede0;
 }
 
-#search-input {
-  padding: 8px 12px;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+@media (max-width: 1000px) {
+  .shows-container,
+  .episodes-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
-#search-count {
-  color: #ffffff;
-  font-size: 0.95rem;
+@media (max-width: 750px) {
+  .shows-container,
+  .episodes-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 500px) {
+  .shows-container,
+  .episodes-container {
+    grid-template-columns: 1fr;
+  }
+
+  .search-container {
+    flex-direction: column;
+  }
+
+  input[type="text"],
+  select {
+    width: 80%;
+  }
 }

From 606a8af8930c533b1cc9d1d0184aeaae7e46fe08 Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Mon, 17 Aug 2026 15:34:06 +0100
Subject: [PATCH 13/14] removing unnecessary spaces

---
 index.html | 16 ----------------
 script.js  | 54 ------------------------------------------------------
 style.css  | 20 --------------------
 3 files changed, 90 deletions(-)

diff --git a/index.html b/index.html
index 5500656..65616e4 100644
--- a/index.html
+++ b/index.html
@@ -19,62 +19,46 @@
       />
       <span id="show-search-count">Loading shows...</span>
     </header>
-
     <main id="shows-root"></main>
-
     <header id="episodes-controls" class="search-container" hidden>
       <button id="back-to-shows" type="button">Back to Shows</button>
-
       <select id="episode-select" aria-label="Select an episode"></select>
-
       <input
         type="text"
         id="search-input"
         placeholder="Search episodes..."
         aria-label="Search episodes"
       />
-
       <span id="search-count">Loading episodes...</span>
     </header>
-
     <main id="root"></main>
-
     <template id="shows-template">
       <article class="show-card">
         <button class="show-button" type="button">
           <h2 class="show-title"></h2>
         </button>
-
         <img class="show-image" src="" alt="" />
-
         <div class="show-summary"></div>
-
         <p class="show-genres"></p>
         <p class="show-status"></p>
         <p class="show-rating"></p>
         <p class="show-runtime"></p>
       </article>
     </template>
-
     <template id="episodes-template">
       <article class="episode-card">
         <h2 class="episode-title"></h2>
-
         <img class="episode-image" src="" alt="" />
-
         <div class="episode-summary"></div>
-
         <button class="episode-link" type="button">View on TVMaze</button>
       </article>
     </template>
-
     <footer>
       Data sourced from
       <a href="https://tvmaze.com" target="_blank" rel="noopener noreferrer">
         TVMaze.com
       </a>
     </footer>
-
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
index ea7697a..b9a4f73 100644
--- a/script.js
+++ b/script.js
@@ -38,14 +38,12 @@ async function setup() {
   const showsControls = document.getElementById("shows-controls");
   const showSearchInput = document.getElementById("show-search-input");
   const showSearchCount = document.getElementById("show-search-count");
-
   const episodesRoot = document.getElementById("root");
   const episodesControls = document.getElementById("episodes-controls");
   const backToShows = document.getElementById("back-to-shows");
   const episodeSelect = document.getElementById("episode-select");
   const searchInput = document.getElementById("search-input");
   const searchCount = document.getElementById("search-count");
-
   const showsTemplate = document.getElementById("shows-template");
   const episodesTemplate = document.getElementById("episodes-template");
 
@@ -70,10 +68,8 @@ async function setup() {
 
     showSearchInput.addEventListener("input", (event) => {
       const searchTerm = event.target.value.toLowerCase().trim();
-
       const filteredShows = allShows.filter((show) => {
         const nameMatch = show.name.toLowerCase().includes(searchTerm);
-
         const genresMatch = show.genres
           .join(" ")
           .toLowerCase()
@@ -98,25 +94,18 @@ async function setup() {
         const selectedShow = allShows.find(
           (show) => show.id === Number(showId),
         );
-
         if (!selectedShow) {
           return;
         }
-
         currentShowName = selectedShow.name;
         currentEpisodes = await getEpisodesForShow(showId);
-
         searchInput.value = "";
         populateEpisodeSelect(currentEpisodes);
-
         showsRoot.hidden = true;
         showsControls.hidden = true;
-
         episodesRoot.hidden = false;
         episodesControls.hidden = false;
-
         makePageForEpisodes(currentEpisodes, currentShowName);
-
         updateCount(currentEpisodes.length);
         window.scrollTo(0, 0);
       } catch (error) {
@@ -127,29 +116,21 @@ async function setup() {
 
     function populateEpisodeSelect(episodes) {
       episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
-
       episodes.forEach((episode) => {
         const option = document.createElement("option");
-
         option.value = episode.id;
         option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
-
         episodeSelect.appendChild(option);
       });
     }
-
     function updateCount(numberOfEpisodes) {
       searchCount.textContent = `Displaying ${numberOfEpisodes}/${currentEpisodes.length} episodes`;
     }
-
     searchInput.addEventListener("input", (event) => {
       const searchTerm = event.target.value.toLowerCase().trim();
-
       episodeSelect.value = "ALL";
-
       const filteredEpisodes = currentEpisodes.filter((episode) => {
         const nameMatch = episode.name.toLowerCase().includes(searchTerm);
-
         const summaryMatch = episode.summary
           ? episode.summary
               .replace(/<[^>]*>/g, "")
@@ -159,55 +140,40 @@ async function setup() {
 
         return nameMatch || summaryMatch;
       });
-
       makePageForEpisodes(filteredEpisodes, currentShowName);
-
       updateCount(filteredEpisodes.length);
     });
-
     episodeSelect.addEventListener("change", (event) => {
       const selectedId = event.target.value;
-
       searchInput.value = "";
-
       if (selectedId === "ALL") {
         makePageForEpisodes(currentEpisodes, currentShowName);
-
         updateCount(currentEpisodes.length);
         return;
       }
-
       const selectedEpisode = currentEpisodes.find(
         (episode) => episode.id === Number(selectedId),
       );
-
       if (selectedEpisode) {
         makePageForEpisodes([selectedEpisode], currentShowName);
-
         updateCount(1);
       }
     });
-
     backToShows.addEventListener("click", () => {
       episodesRoot.hidden = true;
       episodesControls.hidden = true;
-
       showsRoot.hidden = false;
       showsControls.hidden = false;
-
       searchInput.value = "";
       episodeSelect.value = "ALL";
     });
 
     function makePageForShows(showList) {
       showsRoot.innerHTML = "";
-
       const container = document.createElement("div");
       container.className = "shows-container";
-
       showList.forEach((show) => {
         const card = showsTemplate.content.cloneNode(true);
-
         const button = card.querySelector(".show-button");
         const title = card.querySelector(".show-title");
         const image = card.querySelector(".show-image");
@@ -216,57 +182,39 @@ async function setup() {
         const status = card.querySelector(".show-status");
         const rating = card.querySelector(".show-rating");
         const runtime = card.querySelector(".show-runtime");
-
         title.textContent = show.name;
-
         image.src = show.image?.medium || "";
         image.alt = show.name;
-
         summary.innerHTML = show.summary || "No summary available.";
-
         genres.textContent = `Genres: ${show.genres.join(", ")}`;
-
         status.textContent = `Status: ${show.status}`;
-
         rating.textContent = `Rating: ${show.rating?.average || "N/A"}`;
-
         runtime.textContent = `Runtime: ${show.runtime || "N/A"} minutes`;
-
         button.addEventListener("click", () => {
           loadShow(show.id);
         });
-
         container.appendChild(card);
       });
-
       showsRoot.appendChild(container);
     }
 
     function makePageForEpisodes(episodeList, showName) {
       episodesRoot.innerHTML = "";
-
       const heading = document.createElement("h1");
       heading.textContent = `${showName} Episodes`;
       episodesRoot.appendChild(heading);
-
       const container = document.createElement("div");
       container.className = "episodes-container";
-
       episodeList.forEach((episode) => {
         const card = episodesTemplate.content.cloneNode(true);
-
         const title = card.querySelector(".episode-title");
         const image = card.querySelector(".episode-image");
         const summary = card.querySelector(".episode-summary");
         const link = card.querySelector(".episode-link");
-
         title.textContent = `${episode.name} - ${formatEpisodeCode(episode)}`;
-
         image.src = episode.image?.medium || "";
         image.alt = episode.name;
-
         summary.innerHTML = episode.summary || "";
-
         if (episode.url) {
           link.addEventListener("click", () => {
             window.open(episode.url, "_blank");
@@ -274,10 +222,8 @@ async function setup() {
         } else {
           link.style.display = "none";
         }
-
         container.appendChild(card);
       });
-
       episodesRoot.appendChild(container);
     }
   } catch (error) {
diff --git a/style.css b/style.css
index d7e2411..de24945 100644
--- a/style.css
+++ b/style.css
@@ -15,7 +15,6 @@ body {
   margin: 20px 0;
   color: #ffffff;
 }
-
 input[type="text"],
 select {
   padding: 10px 15px;
@@ -28,11 +27,9 @@ select {
   cursor: pointer;
   outline: none;
 }
-
 input[type="text"]::placeholder {
   color: rgba(248, 237, 224, 0.5);
 }
-
 #search-input,
 #show-search-input {
   padding: 8px 12px;
@@ -40,25 +37,21 @@ input[type="text"]::placeholder {
   border: 1px solid #ccc;
   border-radius: 4px;
 }
-
 #search-count,
 #show-search-count {
   color: #ffffff;
   font-size: 0.95rem;
 }
-
 #shows-root,
 #root {
   padding: 20px;
 }
-
 .shows-container,
 .episodes-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }
-
 .show-card,
 .episode-card {
   border: 1px solid rgba(255, 255, 255, 0.3);
@@ -67,13 +60,11 @@ input[type="text"]::placeholder {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
   background-color: #4a0e1e;
 }
-
 .show-image,
 .episode-image {
   width: 100%;
   border-radius: 8px;
 }
-
 .show-button {
   width: 100%;
   margin-bottom: 20px;
@@ -87,13 +78,11 @@ input[type="text"]::placeholder {
 .show-button:hover {
   background-color: #6a1730;
 }
-
 .show-title {
   margin: 0;
   font-size: 22px;
   text-align: center;
 }
-
 .show-summary,
 .episode-summary {
   color: #e8d5c4;
@@ -101,7 +90,6 @@ input[type="text"]::placeholder {
   line-height: 1.6;
   margin-top: 10px;
 }
-
 .show-genres,
 .show-status,
 .show-rating,
@@ -109,7 +97,6 @@ input[type="text"]::placeholder {
   color: #e8d5c4;
   font-size: 13px;
 }
-
 .episode-title {
   border-radius: 6px;
   padding: 8px;
@@ -118,7 +105,6 @@ input[type="text"]::placeholder {
   margin-bottom: 10px;
   color: #f5ede0;
 }
-
 .episode-link,
 #back-to-shows {
   margin-top: 15px;
@@ -130,18 +116,15 @@ input[type="text"]::placeholder {
   font-size: 14px;
   cursor: pointer;
 }
-
 .episode-link:hover,
 #back-to-shows:hover {
   background-color: #6a1730;
 }
-
 #shows-root h1,
 #root h1 {
   color: #e8d5c4;
   text-align: center;
 }
-
 footer {
   color: #e8d5c4;
   text-align: center;
@@ -149,7 +132,6 @@ footer {
   font-size: 13px;
   opacity: 0.7;
 }
-
 footer a {
   color: #f5ede0;
 }
@@ -160,14 +142,12 @@ footer a {
     grid-template-columns: repeat(3, 1fr);
   }
 }
-
 @media (max-width: 750px) {
   .shows-container,
   .episodes-container {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-
 @media (max-width: 500px) {
   .shows-container,
   .episodes-container {

From 6a8d9e8eb7b60f1e7f0c8b67d92cde7d4407cde9 Mon Sep 17 00:00:00 2001
From: abduhasen <abdumussa1363@gmail.com>
Date: Mon, 17 Aug 2026 22:41:08 +0100
Subject: [PATCH 14/14] added dropdown for show list,added html element for the
 dropdown and change css color.

---
 index.html |  7 +++++--
 script.js  | 60 +++++++++++++++++++++++++++++++++++-------------------
 style.css  |  6 +++---
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 65616e4..799c4d3 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,10 @@
         placeholder="Search shows..."
         aria-label="Search shows"
       />
-      <span id="show-search-count">Loading shows...</span>
+      <select id="show-select" aria-label="Select a show">
+        <option value="">Select a show</option>
+      </select>
+      <span id="show-search-count"> Loading shows... </span>
     </header>
     <main id="shows-root"></main>
     <header id="episodes-controls" class="search-container" hidden>
@@ -29,7 +32,7 @@
         placeholder="Search episodes..."
         aria-label="Search episodes"
       />
-      <span id="search-count">Loading episodes...</span>
+      <span id="search-count"> Loading episodes... </span>
     </header>
     <main id="root"></main>
     <template id="shows-template">
diff --git a/script.js b/script.js
index b9a4f73..803e528 100644
--- a/script.js
+++ b/script.js
@@ -32,40 +32,35 @@ function getEpisodesForShow(showId) {
   }
   return episodeCache[showId];
 }
-
 async function setup() {
   const showsRoot = document.getElementById("shows-root");
   const showsControls = document.getElementById("shows-controls");
   const showSearchInput = document.getElementById("show-search-input");
   const showSearchCount = document.getElementById("show-search-count");
+  const showSelect = document.getElementById("show-select");
   const episodesRoot = document.getElementById("root");
   const episodesControls = document.getElementById("episodes-controls");
   const backToShows = document.getElementById("back-to-shows");
-  const episodeSelect = document.getElementById("episode-select");
+  const episodeDropdown = document.getElementById("episode-select");
   const searchInput = document.getElementById("search-input");
   const searchCount = document.getElementById("search-count");
   const showsTemplate = document.getElementById("shows-template");
   const episodesTemplate = document.getElementById("episodes-template");
-
   let currentEpisodes = [];
   let currentShowName = "";
-
   try {
     const allShows = await getAllShows();
-
     allShows.sort((a, b) =>
       a.name.localeCompare(b.name, undefined, {
         sensitivity: "base",
       }),
     );
-
     makePageForShows(allShows);
     updateShowCount(allShows.length);
-
+    fillShowDropdown(allShows);
     function updateShowCount(numberOfShows) {
       showSearchCount.textContent = `Displaying ${numberOfShows}/${allShows.length} shows`;
     }
-
     showSearchInput.addEventListener("input", (event) => {
       const searchTerm = event.target.value.toLowerCase().trim();
       const filteredShows = allShows.filter((show) => {
@@ -81,14 +76,21 @@ async function setup() {
               .toLowerCase()
               .includes(searchTerm)
           : false;
-
         return nameMatch || genresMatch || summaryMatch;
       });
-
       makePageForShows(filteredShows);
       updateShowCount(filteredShows.length);
+      fillShowDropdown(filteredShows);
     });
+    showSelect.addEventListener("change", (event) => {
+      const selectedShowId = event.target.value;
+
+      if (selectedShowId === "") {
+        return;
+      }
 
+      loadShow(selectedShowId);
+    });
     async function loadShow(showId) {
       try {
         const selectedShow = allShows.find(
@@ -100,7 +102,7 @@ async function setup() {
         currentShowName = selectedShow.name;
         currentEpisodes = await getEpisodesForShow(showId);
         searchInput.value = "";
-        populateEpisodeSelect(currentEpisodes);
+        fillEpisodeDropdown(currentEpisodes);
         showsRoot.hidden = true;
         showsControls.hidden = true;
         episodesRoot.hidden = false;
@@ -113,14 +115,33 @@ async function setup() {
         searchCount.textContent = "Error loading episodes.";
       }
     }
+    function fillShowDropdown(shows) {
+      showSelect.innerHTML = "";
+
+      const defaultOption = document.createElement("option");
+
+      defaultOption.value = "";
+      defaultOption.textContent = "Select a show";
+
+      showSelect.appendChild(defaultOption);
+
+      shows.forEach((show) => {
+        const option = document.createElement("option");
+
+        option.value = show.id;
+        option.textContent = show.name;
+
+        showSelect.appendChild(option);
+      });
+    }
+    function fillEpisodeDropdown(episodes) {
+      episodeDropdown.innerHTML = `<option value="ALL">All Episodes</option>`;
 
-    function populateEpisodeSelect(episodes) {
-      episodeSelect.innerHTML = `<option value="ALL">All Episodes</option>`;
       episodes.forEach((episode) => {
         const option = document.createElement("option");
         option.value = episode.id;
         option.textContent = `${formatEpisodeCode(episode)} - ${episode.name}`;
-        episodeSelect.appendChild(option);
+        episodeDropdown.appendChild(option);
       });
     }
     function updateCount(numberOfEpisodes) {
@@ -128,7 +149,7 @@ async function setup() {
     }
     searchInput.addEventListener("input", (event) => {
       const searchTerm = event.target.value.toLowerCase().trim();
-      episodeSelect.value = "ALL";
+      episodeDropdown.value = "ALL";
       const filteredEpisodes = currentEpisodes.filter((episode) => {
         const nameMatch = episode.name.toLowerCase().includes(searchTerm);
         const summaryMatch = episode.summary
@@ -137,13 +158,12 @@ async function setup() {
               .toLowerCase()
               .includes(searchTerm)
           : false;
-
         return nameMatch || summaryMatch;
       });
       makePageForEpisodes(filteredEpisodes, currentShowName);
       updateCount(filteredEpisodes.length);
     });
-    episodeSelect.addEventListener("change", (event) => {
+    episodeDropdown.addEventListener("change", (event) => {
       const selectedId = event.target.value;
       searchInput.value = "";
       if (selectedId === "ALL") {
@@ -165,9 +185,9 @@ async function setup() {
       showsRoot.hidden = false;
       showsControls.hidden = false;
       searchInput.value = "";
-      episodeSelect.value = "ALL";
+      episodeDropdown.value = "ALL";
+      showSelect.value = "";
     });
-
     function makePageForShows(showList) {
       showsRoot.innerHTML = "";
       const container = document.createElement("div");
@@ -197,7 +217,6 @@ async function setup() {
       });
       showsRoot.appendChild(container);
     }
-
     function makePageForEpisodes(episodeList, showName) {
       episodesRoot.innerHTML = "";
       const heading = document.createElement("h1");
@@ -228,7 +247,6 @@ async function setup() {
     }
   } catch (error) {
     showSearchCount.textContent = "Failed to load TV shows.";
-
     console.error(error);
   }
 }
diff --git a/style.css b/style.css
index de24945..e45240c 100644
--- a/style.css
+++ b/style.css
@@ -2,7 +2,7 @@ body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  background-color: #121010;
+  background-color: #473232;
 }
 [hidden] {
   display: none !important;
@@ -57,8 +57,8 @@ input[type="text"]::placeholder {
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   padding: 15px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
-  background-color: #4a0e1e;
+  box-shadow: 0 4px 20px rgba(91, 84, 84, 0.7);
+  background-color: #361a1fb9;
 }
 .show-image,
 .episode-image {
