From bf4827b8e63ab1b9ef60d3305721f43eee1b8377 Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Sat, 13 May 2023 15:51:20 -0700
Subject: [PATCH 1/9] Updated script

---
 script.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 87a7de8..92cbc12 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,3 @@
-//You can edit ALL of the code here
 function setup() {
   const allEpisodes = getAllEpisodes();
   makePageForEpisodes(allEpisodes);
@@ -6,7 +5,87 @@ function setup() {
 
 function makePageForEpisodes(episodeList) {
   const rootElem = document.getElementById("root");
-  rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+  createHeader(rootElem)
+
+
+  const mainElem = document.createElement("main");
+  mainElem.textContent = `Got ${episodeList.length} episode(s)`;
+  rootElem.appendChild(mainElem);
+
+  createNav(rootElem)
+  allSeasonDiv(rootElem, episodeList)
+  createFooter(rootElem)
+}
+
+function allSeasonDiv(parentElem, episodeList){
+
+  const seasonContainer = document.createElement("div")
+  const seasonContainerHeader = document.createElement("h1")
+  const seasonContainerImage = document.createElement("img")
+  seasonContainerHeader.textContent = episodeList[0].name
+  seasonContainerImage.src = episodeList[0].image.medium
+
+  seasonContainer.appendChild(seasonContainerHeader )
+  seasonContainer.appendChild(seasonContainerImage )
+  parentElem.appendChild(seasonContainer)
+}
+
+
+
+function createHeader(parentElem){
+  const headerElem = document.createElement("header");
+  headerElem.classList.add("banner")
+  headerElem.textContent = "My Episode List"; // Replace with your desired header content
+  parentElem.appendChild(headerElem);
+}
+
+function createNav(parentElem) {
+  const navElem = document.createElement("nav");
+  navElem.classList.add("nav-Banner");
+
+  // Create the selector section
+  const selectorDiv = document.createElement("div");
+  selectorDiv.classList.add("selector");
+
+  // Create the select button
+  const selectButton = document.createElement("select");
+  selectButton.textContent = "Select a Show";
+
+  const seasonButton = document.createElement("select");
+  seasonButton.textContent = "Select a season";
+
+
+  // Create the default option
+  const defaultOptionForSelect = document.createElement("option");
+  defaultOptionForSelect.textContent = "Choose a show";
+  selectButton.appendChild(defaultOptionForSelect);
+
+  const defaultOption = document.createElement("option");
+  defaultOption.textContent = "Choose a season";
+  seasonButton.appendChild(defaultOption);
+  
+  // Create the show options
+  // const show1Option = document.createElement("option");
+  // show1Option.textContent = "Show 1";
+  // selectButton.appendChild(show1Option)
+
+
+
+  // Append the select button to the selector section
+  selectorDiv.appendChild(selectButton);
+  selectorDiv.appendChild(seasonButton);
+  // Append the selector section to the navigation
+  navElem.appendChild(selectorDiv);
+
+  // Append the navigation to the parent element
+  parentElem.appendChild(navElem);
+}
+
+
+function createFooter(parentElem){
+  const footerElem = document.createElement("footer");
+  footerElem.textContent = "© 2023 My Website"; // Replace with your desired footer content
+  parentElem.appendChild(footerElem);
 }
 
 window.onload = setup;

From b9c3e41e02ca03e72ba462da5fd0fd5af08997bd Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Sat, 13 May 2023 15:51:38 -0700
Subject: [PATCH 2/9] Updated style

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

diff --git a/style.css b/style.css
index 77cb8d4..a6d7f28 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,32 @@
 #root {
   color: red;
+  display: flex;
+  flex-direction: column;
 }
+
+.banner{
+  background-color: #3c2f4e;
+  color: #fff;
+  text-align: center;
+  padding: 31px 0px;
+}
+
+.nav-Banner{
+
+}
+
+/* ------------------------------- */
+.seasonDiv{
+  
+}
+
+
+
+/* ------------------------------- */
+
+footer{
+  color: black;
+  display: flex;
+  justify-content: center;
+}
+

From d45695657a29384c4495c7565106bc963d39051c Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Sat, 13 May 2023 17:09:18 -0700
Subject: [PATCH 3/9] Updated

---
 script.js | 43 +++++++++++++++++++++++++++++++---------
 style.css | 59 +++++++++++++++++++++++++++++++++++++++++++------------
 2 files changed, 80 insertions(+), 22 deletions(-)

diff --git a/script.js b/script.js
index 92cbc12..8568efc 100644
--- a/script.js
+++ b/script.js
@@ -19,15 +19,40 @@ function makePageForEpisodes(episodeList) {
 
 function allSeasonDiv(parentElem, episodeList){
 
-  const seasonContainer = document.createElement("div")
-  const seasonContainerHeader = document.createElement("h1")
-  const seasonContainerImage = document.createElement("img")
-  seasonContainerHeader.textContent = episodeList[0].name
-  seasonContainerImage.src = episodeList[0].image.medium
-
-  seasonContainer.appendChild(seasonContainerHeader )
-  seasonContainer.appendChild(seasonContainerImage )
-  parentElem.appendChild(seasonContainer)
+  const episodeContainerMainDiv = document.createElement("div")
+  episodeContainerMainDiv.classList.add("episode-Container-MainDiv")
+  
+  
+
+  const episodeListContainer = episodeList.map((episode) => {
+
+    //div 
+    const episodeContainer = document.createElement("div");
+    episodeContainer.classList.add("episode-container");
+
+    //h1
+    const episodeName = document.createElement("h1")
+    episodeName.textContent = episode.name;
+    episodeContainer.appendChild(episodeName)
+    //img
+    const episodeimage = document.createElement("img")
+    episodeimage.src = episode.image.medium;
+    episodeContainer.appendChild(episodeimage)
+    //decription
+    const episodeSummary = document.createElement("p")
+    episodeSummary.textContent = episode.summary
+    episodeContainer.appendChild(episodeSummary)
+
+    return episodeContainer
+  }) 
+
+
+
+  episodeListContainer.forEach((episodeContainer) => {
+    episodeContainerMainDiv.appendChild(episodeContainer)
+  })
+
+  parentElem.appendChild(episodeContainerMainDiv)
 }
 
 
diff --git a/style.css b/style.css
index a6d7f28..df32d71 100644
--- a/style.css
+++ b/style.css
@@ -1,32 +1,65 @@
+/* CSS */
+
+/* Overall layout */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
 #root {
-  color: red;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  padding: 20px;
 }
 
-.banner{
-  background-color: #3c2f4e;
+/* Header */
+header {
+  background-color: #333;
   color: #fff;
+  padding: 20px;
   text-align: center;
-  padding: 31px 0px;
 }
 
-.nav-Banner{
-
+/* Main content */
+main {
+  margin: 20px 0;
 }
 
-/* ------------------------------- */
-.seasonDiv{
-  
+.episode-container {
+  flex-basis: 25%;
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: center;
+  width: 40rem;
 }
 
+.episode-container h1 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
 
+.episode-container img {
+  width: 28%;
+  height: auto;
+  margin-bottom: 10px;
+}
 
-/* ------------------------------- */
+.episode-container p {
+  font-size: 14px;
+}
 
-footer{
-  color: black;
+.episode-Container-MainDiv{
   display: flex;
-  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
+/* Footer */
+footer {
+  background-color: #333;
+  color: #fff;
+  padding: 20px;
+  text-align: center;
+}

From 5d2bb0728257138bb90eb2227e714d30dfdafa5b Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Mon, 15 May 2023 15:05:56 -0700
Subject: [PATCH 4/9] Level 100, Completed

---
 script.js | 61 ++++++++++++++++++++++++++++++-------------------------
 style.css |  9 +++++---
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/script.js b/script.js
index 8568efc..d873184 100644
--- a/script.js
+++ b/script.js
@@ -13,48 +13,53 @@ function makePageForEpisodes(episodeList) {
   rootElem.appendChild(mainElem);
 
   createNav(rootElem)
-  allSeasonDiv(rootElem, episodeList)
+  allEpisodesDiv(rootElem, episodeList)
   createFooter(rootElem)
 }
 
-function allSeasonDiv(parentElem, episodeList){
+function allEpisodesDiv(parentElem, episodeList) {
+  const episodesContainer = document.createElement("div");
+  episodesContainer.classList.add("episode-Container-MainDiv");
 
-  const episodeContainerMainDiv = document.createElement("div")
-  episodeContainerMainDiv.classList.add("episode-Container-MainDiv")
-  
-  
-
-  const episodeListContainer = episodeList.map((episode) => {
-
-    //div 
+  episodeList.forEach((episode) => {
     const episodeContainer = document.createElement("div");
     episodeContainer.classList.add("episode-container");
 
-    //h1
-    const episodeName = document.createElement("h1")
-    episodeName.textContent = episode.name;
-    episodeContainer.appendChild(episodeName)
-    //img
-    const episodeimage = document.createElement("img")
-    episodeimage.src = episode.image.medium;
-    episodeContainer.appendChild(episodeimage)
-    //decription
-    const episodeSummary = document.createElement("p")
-    episodeSummary.textContent = episode.summary
-    episodeContainer.appendChild(episodeSummary)
+    const episodeCode = getEpisodeCode(episode.season, episode.number);
 
-    return episodeContainer
-  }) 
+    const episodeCodeElem = document.createElement("p");
+    episodeCodeElem.textContent = episodeCode;
+    episodeContainer.appendChild(episodeCodeElem);
 
+    const episodeNameElem = document.createElement("h2");
+    episodeNameElem.textContent = episode.name;
+    episodeContainer.appendChild(episodeNameElem);
 
+    const episodeImageElem = document.createElement("img");
+    episodeImageElem.src = episode.image.medium;
+    episodeImageElem.alt = episode.name;
+    episodeContainer.appendChild(episodeImageElem);
 
-  episodeListContainer.forEach((episodeContainer) => {
-    episodeContainerMainDiv.appendChild(episodeContainer)
-  })
+    const episodeSummaryElem = document.createElement("p");
+    episodeSummaryElem.innerHTML = episode.summary;
+    episodeContainer.appendChild(episodeSummaryElem);
 
-  parentElem.appendChild(episodeContainerMainDiv)
+    const episodeLinkElem = document.createElement("a");
+    episodeLinkElem.href = episode.url;
+    episodeLinkElem.textContent = "More info on TVMaze.com";
+    episodeContainer.appendChild(episodeLinkElem);
+
+    episodesContainer.appendChild(episodeContainer);
+  });
+
+  parentElem.appendChild(episodesContainer);
 }
 
+function getEpisodeCode(season, episode) {
+  const seasonCode = String(season).padStart(2, "0");
+  const episodeCode = String(episode).padStart(2, "0");
+  return `S${seasonCode}E${episodeCode}`;
+}
 
 
 function createHeader(parentElem){
diff --git a/style.css b/style.css
index df32d71..04126a7 100644
--- a/style.css
+++ b/style.css
@@ -16,10 +16,13 @@ body {
 
 /* Header */
 header {
-  background-color: #333;
+  background-color: #39223e;
   color: #fff;
-  padding: 20px;
+  padding: 31px;
   text-align: center;
+  width: 105%;
+  height: 34px;
+
 }
 
 /* Main content */
@@ -41,7 +44,7 @@ main {
 }
 
 .episode-container img {
-  width: 28%;
+  width: 78%;
   height: auto;
   margin-bottom: 10px;
 }

From fdf67f90976c9900fc4aec8e2b4913f8870ff48d Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Tue, 16 May 2023 01:40:27 -0700
Subject: [PATCH 5/9] Updated style.css

---
 style.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 04126a7..e7d0125 100644
--- a/style.css
+++ b/style.css
@@ -11,7 +11,6 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
 }
 
 /* Header */
@@ -57,6 +56,13 @@ main {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  background-color: #f3f3f3;
+  margin: 12px 0px;
+}
+
+.matched-count {
+  font-weight: bold;
+  margin-top: 10px;
 }
 
 /* Footer */

From 44372f71a78b6cb82b7955f2c5c574e3204c0d5f Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Tue, 16 May 2023 01:42:02 -0700
Subject: [PATCH 6/9] Updated index

Added type to script, so i can move small functions in a different file.
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9a400d1..46baf37 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,6 @@
     <script src="episodes.js"></script>
 
     <!-- Loads YOUR javascript code -->
-    <script src="script.js"></script>
+    <script type="module" src="script.js"></script>
   </body>
 </html>

From df299dc63fa68ccfe72f1be91ca6002af8e40364 Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Tue, 16 May 2023 01:45:17 -0700
Subject: [PATCH 7/9] Updated script

---
 script.js | 185 +++++++++++++++++++++++++++---------------------------
 1 file changed, 93 insertions(+), 92 deletions(-)

diff --git a/script.js b/script.js
index d873184..99e4f9a 100644
--- a/script.js
+++ b/script.js
@@ -1,121 +1,122 @@
+import {handleSearch, getEpisodeCode, handleEpisodeSelection} from './helpers.js'
+
+
 function setup() {
-  const allEpisodes = getAllEpisodes();
-  makePageForEpisodes(allEpisodes);
+    const allEpisodes = getAllEpisodes();
+    makePageForEpisodes(allEpisodes);
 }
 
 function makePageForEpisodes(episodeList) {
-  const rootElem = document.getElementById("root");
-  createHeader(rootElem)
+    const rootElem = document.getElementById("root");
+    createHeader(rootElem)
 
 
-  const mainElem = document.createElement("main");
-  mainElem.textContent = `Got ${episodeList.length} episode(s)`;
-  rootElem.appendChild(mainElem);
+    const mainElem = document.createElement("main");
+    rootElem.appendChild(mainElem);
 
-  createNav(rootElem)
-  allEpisodesDiv(rootElem, episodeList)
-  createFooter(rootElem)
+    createNav(rootElem, episodeList)
+    allEpisodesDiv(rootElem, episodeList)
+    createFooter(rootElem)
 }
 
 function allEpisodesDiv(parentElem, episodeList) {
-  const episodesContainer = document.createElement("div");
-  episodesContainer.classList.add("episode-Container-MainDiv");
+    const episodesContainer = document.createElement("div");
+    episodesContainer.classList.add("episode-Container-MainDiv");
 
-  episodeList.forEach((episode) => {
-    const episodeContainer = document.createElement("div");
-    episodeContainer.classList.add("episode-container");
+    episodeList.forEach((episode) => {
+        const episodeContainer = document.createElement("div");
+        episodeContainer.classList.add("episode-container");
 
-    const episodeCode = getEpisodeCode(episode.season, episode.number);
+        const episodeCode = getEpisodeCode(episode.season, episode.number);
 
-    const episodeCodeElem = document.createElement("p");
-    episodeCodeElem.textContent = episodeCode;
-    episodeContainer.appendChild(episodeCodeElem);
+        const episodeCodeElem = document.createElement("p");
+        episodeCodeElem.textContent = episodeCode;
+        episodeContainer.appendChild(episodeCodeElem);
 
-    const episodeNameElem = document.createElement("h2");
-    episodeNameElem.textContent = episode.name;
-    episodeContainer.appendChild(episodeNameElem);
+        const episodeNameElem = document.createElement("h2");
+        episodeNameElem.textContent = episode.name;
+        episodeContainer.appendChild(episodeNameElem);
 
-    const episodeImageElem = document.createElement("img");
-    episodeImageElem.src = episode.image.medium;
-    episodeImageElem.alt = episode.name;
-    episodeContainer.appendChild(episodeImageElem);
+        const episodeImageElem = document.createElement("img");
+        episodeImageElem.src = episode.image.medium;
+        episodeImageElem.alt = episode.name;
+        episodeContainer.appendChild(episodeImageElem);
 
-    const episodeSummaryElem = document.createElement("p");
-    episodeSummaryElem.innerHTML = episode.summary;
-    episodeContainer.appendChild(episodeSummaryElem);
+        const episodeSummaryElem = document.createElement("p");
+        episodeSummaryElem.innerHTML = episode.summary;
+        episodeContainer.appendChild(episodeSummaryElem);
 
-    const episodeLinkElem = document.createElement("a");
-    episodeLinkElem.href = episode.url;
-    episodeLinkElem.textContent = "More info on TVMaze.com";
-    episodeContainer.appendChild(episodeLinkElem);
+        const episodeLinkElem = document.createElement("a");
+        episodeLinkElem.href = episode.url;
+        episodeLinkElem.textContent = "More info on TVMaze.com";
+        episodeContainer.appendChild(episodeLinkElem);
 
-    episodesContainer.appendChild(episodeContainer);
-  });
-
-  parentElem.appendChild(episodesContainer);
-}
+        episodesContainer.appendChild(episodeContainer);
+    });
 
-function getEpisodeCode(season, episode) {
-  const seasonCode = String(season).padStart(2, "0");
-  const episodeCode = String(episode).padStart(2, "0");
-  return `S${seasonCode}E${episodeCode}`;
+    parentElem.appendChild(episodesContainer);
 }
 
-
-function createHeader(parentElem){
-  const headerElem = document.createElement("header");
-  headerElem.classList.add("banner")
-  headerElem.textContent = "My Episode List"; // Replace with your desired header content
-  parentElem.appendChild(headerElem);
+function createHeader(parentElem) {
+    const headerElem = document.createElement("header");
+    headerElem.classList.add("banner")
+    headerElem.textContent = "My Episode List";
+    parentElem.appendChild(headerElem);
 }
 
-function createNav(parentElem) {
-  const navElem = document.createElement("nav");
-  navElem.classList.add("nav-Banner");
-
-  // Create the selector section
-  const selectorDiv = document.createElement("div");
-  selectorDiv.classList.add("selector");
-
-  // Create the select button
-  const selectButton = document.createElement("select");
-  selectButton.textContent = "Select a Show";
-
-  const seasonButton = document.createElement("select");
-  seasonButton.textContent = "Select a season";
-
-
-  // Create the default option
-  const defaultOptionForSelect = document.createElement("option");
-  defaultOptionForSelect.textContent = "Choose a show";
-  selectButton.appendChild(defaultOptionForSelect);
-
-  const defaultOption = document.createElement("option");
-  defaultOption.textContent = "Choose a season";
-  seasonButton.appendChild(defaultOption);
-  
-  // Create the show options
-  // const show1Option = document.createElement("option");
-  // show1Option.textContent = "Show 1";
-  // selectButton.appendChild(show1Option)
-
-
-
-  // Append the select button to the selector section
-  selectorDiv.appendChild(selectButton);
-  selectorDiv.appendChild(seasonButton);
-  // Append the selector section to the navigation
-  navElem.appendChild(selectorDiv);
-
-  // Append the navigation to the parent element
-  parentElem.appendChild(navElem);
+function createNav(parentElem, episodeList) {
+    const navElem = document.createElement("nav");
+    navElem.classList.add("nav-Banner");
+
+    // Create the selector section
+    const selectorDiv = document.createElement("div");
+    selectorDiv.classList.add("selector");
+
+    // search bar
+    const searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.placeholder = "Search episodes";
+    searchInput.addEventListener("input", handleSearch);
+    selectorDiv.appendChild(searchInput);
+    
+
+    const selectInput = document.createElement("select");
+    selectInput.addEventListener("change", handleEpisodeSelection);
+    selectorDiv.appendChild(selectInput);
+
+    const defaultOption = document.createElement("option");
+    defaultOption.textContent = "Jump to an episode";
+    selectInput.appendChild(defaultOption);
+
+    episodeList.forEach((episode, index) => {
+        const option = document.createElement("option");
+        const episodeCode = getEpisodeCode(episode.season, episode.number);
+        option.textContent = `${episodeCode} - ${
+            episode.name
+        }`;
+        option.value = index;
+        selectInput.appendChild(option);
+    });
+
+    // Show "Show all episodes" button
+    const showAllButton = document.createElement("button");
+    showAllButton.textContent = "Show all episodes";
+    showAllButton.addEventListener("click", () => {
+        document.querySelectorAll(".episode-container").forEach((container) => {
+            container.style.display = "block";
+        });
+    });
+    selectorDiv.appendChild(showAllButton);
+
+    navElem.appendChild(selectorDiv);
+    parentElem.appendChild(navElem);
 }
 
 
-function createFooter(parentElem){
-  const footerElem = document.createElement("footer");
-  footerElem.textContent = "© 2023 My Website"; // Replace with your desired footer content
-  parentElem.appendChild(footerElem);
+function createFooter(parentElem) {
+    const footerElem = document.createElement("footer");
+    footerElem.textContent = " 2023 My Website";
+    parentElem.appendChild(footerElem);
 }
 
 window.onload = setup;

From b96646a4b825270a51435781cd2b7dcc184b522f Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Tue, 16 May 2023 01:45:53 -0700
Subject: [PATCH 8/9] Created Helper.js

Moved most of my function here
---
 helpers.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 helpers.js

diff --git a/helpers.js b/helpers.js
new file mode 100644
index 0000000..98dfd3a
--- /dev/null
+++ b/helpers.js
@@ -0,0 +1,54 @@
+export function handleSearch() {
+    const searchTerm = this.value.trim().toLowerCase();
+    const episodes = document.getElementsByClassName("episode-container");
+  
+    let matchedCount = 0;
+  
+    for (const episode of episodes) {
+      const episodeName = episode.querySelector("h2").textContent.toLowerCase();
+      const episodeSummary = episode.querySelector("p").textContent.toLowerCase();
+  
+      if (episodeName.includes(searchTerm) || episodeSummary.includes(searchTerm)) {
+        episode.style.display = "block";
+        matchedCount++;
+      } else {
+        episode.style.display = "none";
+      }
+    }
+  
+    updateMatchedCount(matchedCount);
+  }
+
+  export function updateMatchedCount(count) {
+    const countElem = document.querySelector(".matched-count");
+    
+    // Create the matched count element if it doesn't exist
+    if (!countElem) {
+      const parentElem = document.querySelector("main");
+      const newCountElem = document.createElement("p");
+      newCountElem.classList.add("matched-count");
+      parentElem.insertBefore(newCountElem, parentElem.firstChild);
+      countElem = newCountElem;
+    }
+    
+    countElem.textContent = `Displaying ${count} episode(s)`;
+  }
+
+  export function getEpisodeCode(season, episode) {
+    const seasonCode = String(season).padStart(2, "0");
+    const episodeCode = String(episode).padStart(2, "0");
+    return `S${seasonCode}E${episodeCode}`;
+  }
+
+
+ export function handleEpisodeSelection(event) {
+    const selectedIndex = event.target.value;
+
+      document.querySelectorAll(".episode-container").forEach((container, index) => {
+      if (index === Number(selectedIndex)) {
+        container.style.display = "block";
+      } else {
+        container.style.display = "none";
+      }
+    })
+  }

From 1fdbdcb94d8ac4aea22cca3644b136bfc05f96bc Mon Sep 17 00:00:00 2001
From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com>
Date: Tue, 16 May 2023 01:45:59 -0700
Subject: [PATCH 9/9] Create launch.json

---
 .vscode/launch.json | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..2ba986f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file