Merge pull request #7 from donarbl/level---400

LONDON | DONARA BLANC | TV SHOW PROJECT | Level 400 UPDATED
donarbl · Jan 17, 2025 · 09cba16 · 09cba16
2 parents 6f27859 + fb708b2
commit 09cba16
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TV Show Project | Pezhman Azizi (pezhman-azizi)</title>
+    <title>TV Show Project |Donara Blanc (donarbl)</title>
     <link href="style.css" rel="stylesheet" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   </head>
@@ -18,6 +18,9 @@ <h1>TV Series Episodes</h1>
             <option value="">Select an Episode</option>
           </select>
           <p id="search-result"></p>
+          <select id ="show-selector">
+            <option value ="">Select a Show></option>
+          </select>
       </div>
   </header>
 

diff --git a/script.js b/script.js
@@ -1,11 +1,11 @@
-let allEpisodes = []; // Store all episodes globally for reuse throughout the script
+let allShows = [];
+let allEpisodes = [];
+let showEpisodesCache = {};
 
-// Utility function to pad numbers with leading zeros (e.g., 1 becomes 01)
 function padNumber(number) {
   return number.toString().padStart(2, '0');
 }
 
-// Generate HTML structure for an individual episode card
 function generateEpisodeHTML(episode) {
   const episodeNumber = `S${padNumber(episode.season)}E${padNumber(episode.number)}`;
   return `
@@ -19,15 +19,13 @@ function generateEpisodeHTML(episode) {
     </article>`;
 }
 
-// Render the list of episodes on the page
 function renderEpisodes(episodesToDisplay) {
   const episodesGrid = document.getElementById('episodes-grid');
   episodesGrid.innerHTML = episodesToDisplay.map(generateEpisodeHTML).join('');
   const searchResult = document.getElementById('search-result');
   searchResult.textContent = `Showing ${episodesToDisplay.length} out of ${allEpisodes.length} episodes`;
 }
 
-// Filter episodes based on the search input
 function filterEpisodes(event) {
   const searchTerm = event.target.value.toLowerCase();
   const filteredEpisodes = allEpisodes.filter(episode =>
@@ -37,7 +35,6 @@ function filterEpisodes(event) {
   renderEpisodes(filteredEpisodes);
 }
 
-// Populate the episode selector dropdown with all episodes
 function populateEpisodeSelector() {
   const episodeSelector = document.getElementById('episode-selector');
   episodeSelector.innerHTML = '<option value="">Select an Episode</option>';
@@ -50,7 +47,6 @@ function populateEpisodeSelector() {
   });
 }
 
-// Handle the selection of an episode from the dropdown
 function handleEpisodeSelection(event) {
   const selectedEpisodeId = event.target.value;
   if (selectedEpisodeId) {
@@ -61,32 +57,73 @@ function handleEpisodeSelection(event) {
   }
 }
 
-// Fetch episodes from the TVMaze API
-function fetchEpisodes() {
-  const episodesGrid = document.getElementById('episodes-grid');
-  episodesGrid.innerHTML = '<p>Loading episodes...</p>';
-  fetch('https://api.tvmaze.com/shows/82/episodes')
-    .then(response => {
-      if (!response.ok) {
-        throw new Error('Failed to fetch episodes');
-      }
-      return response.json();
-    })
-    .then(data => {
-      allEpisodes = data; // Store fetched episodes globally
-      renderEpisodes(allEpisodes); // Display episodes
-      populateEpisodeSelector(); // Populate dropdown
-    })
-    .catch(error => {
+async function fetchShows() {
+  if (allShows.length === 0) {
+    const response = await fetch('https://api.tvmaze.com/shows');
+    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' }));
+  }
+  return allShows;
+}
+
+async function fetchEpisodes(showId) {
+  if (!showEpisodesCache[showId]) {
+    const response = await fetch(`https://api.tvmaze.com/shows/${showId}/episodes`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch episodes');
+    }
+    showEpisodesCache[showId] = await response.json();
+  }
+  return showEpisodesCache[showId];
+}
+
+function populateShowSelector(shows) {
+  const showSelector = document.getElementById('show-selector');
+  showSelector.innerHTML = '<option value="">Select a Show</option>';
+  shows.forEach(show => {
+    const option = document.createElement('option');
+    option.value = show.id;
+    option.textContent = show.name;
+    showSelector.appendChild(option);
+  });
+}
+
+async function handleShowSelection(event) {
+  const selectedShowId = event.target.value;
+  if (selectedShowId) {
+    try {
+      allEpisodes = await fetchEpisodes(selectedShowId);
+      renderEpisodes(allEpisodes);
+      populateEpisodeSelector();
+    } catch (error) {
+      const episodesGrid = document.getElementById('episodes-grid');
       episodesGrid.innerHTML = `<p class="error">Error loading episodes: ${error.message}</p>`;
-    });
+    }
+  } else {
+    allEpisodes = [];
+    renderEpisodes([]);
+    populateEpisodeSelector();
+  }
 }
 
-// Set up the page once the DOM content is fully loaded
-document.addEventListener('DOMContentLoaded', () => {
-  fetchEpisodes(); // Fetch episodes from the API
-  const searchBox = document.getElementById('search-box');
-  searchBox.addEventListener('input', filterEpisodes);
-  const episodeSelector = document.getElementById('episode-selector');
-  episodeSelector.addEventListener('change', handleEpisodeSelection);
+document.addEventListener('DOMContentLoaded', async () => {
+  try {
+    const shows = await fetchShows();
+    populateShowSelector(shows);
+
+    const showSelector = document.getElementById('show-selector');
+    showSelector.addEventListener('change', handleShowSelection);
+
+    const searchBox = document.getElementById('search-box');
+    searchBox.addEventListener('input', filterEpisodes);
+
+    const episodeSelector = document.getElementById('episode-selector');
+    episodeSelector.addEventListener('change', handleEpisodeSelection);
+  } catch (error) {
+    const episodesGrid = document.getElementById('episodes-grid');
+    episodesGrid.innerHTML = `<p class="error">Error loading shows: ${error.message}</p>`;
+  }
 });
diff --git a/style.css b/style.css
@@ -33,7 +33,7 @@ header h1 {
 }
 
 /* Search Box */
-#search-box {
+#search-box, #show-selector {
   width: 100%;
   max-width: 400px;
   padding: 5px 5px;