From 1d6dccf0b3fbe6f7f99e928d1c9e91809c003b6e Mon Sep 17 00:00:00 2001 From: shafiekwalker7861 Date: Sat, 8 Aug 2026 17:12:29 +0200 Subject: [PATCH 1/7] Complete level 0 setup --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9a400d1..c35a117 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - TV Show Project | My Name (My GitHub username) + TV Show Project | Shafiek Walker (shafiekwalker7861) From e9e658956e161d0fe1877cc143d0f559cda1a512 Mon Sep 17 00:00:00 2001 From: shafiekwalker7861 Date: Sat, 8 Aug 2026 17:34:11 +0200 Subject: [PATCH 2/7] Test netlify deployment --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c35a117..86604c9 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
- +

Netlify deployment test

From 2008b6f36b8c3b342b5e216177a739096a3200b5 Mon Sep 17 00:00:00 2001 From: shafiekwalker7861 Date: Sat, 8 Aug 2026 17:36:11 +0200 Subject: [PATCH 3/7] Remove Netlify deployment test --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 86604c9..c35a117 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-

Netlify deployment test

+ From 1150f8e0de30a358046bb9a471b7f9b5a4530968 Mon Sep 17 00:00:00 2001 From: shafiekwalker7861 Date: Sun, 9 Aug 2026 11:54:20 +0200 Subject: [PATCH 4/7] Complete TV Show Project level 100 --- index.html | 12 ++++++++-- script.js | 36 +++++++++++++++++++++++++--- style.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 112 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index c35a117..bd174b2 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,16 @@ -
-
+

+ +
+ +
+

+ Episode data originally provided by + TVMaze.com +

+
diff --git a/script.js b/script.js index 87a7de8..76d662e 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,5 @@ -//You can edit ALL of the code here +// You can edit ALL of the code here + function setup() { const allEpisodes = getAllEpisodes(); makePageForEpisodes(allEpisodes); @@ -6,7 +7,36 @@ function setup() { function makePageForEpisodes(episodeList) { const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; + const episodeCount = document.getElementById("episode-count"); + + episodeCount.textContent = `Got ${episodeList.length} episode(s)`; + + for (const episode of episodeList) { + const episodeName = episode.name; + + const seasonNumber = String(episode.season).padStart(2, "0"); + const episodeNumber = String(episode.number).padStart(2, "0"); + const episodeCode = `S${seasonNumber}E${episodeNumber}`; + + const episodeCard = document.createElement("div"); + episodeCard.classList.add("episode-card"); + + const heading = document.createElement("h2"); + heading.textContent = `${episodeName} - ${episodeCode}`; + + const episodeImage = document.createElement("img"); + episodeImage.src = episode.image.medium; + episodeImage.alt = `Image for ${episodeName}`; + + const episodeSummary = document.createElement("div"); + episodeSummary.innerHTML = episode.summary; + + episodeCard.appendChild(heading); + episodeCard.appendChild(episodeImage); + episodeCard.appendChild(episodeSummary); + + rootElem.appendChild(episodeCard); + } } -window.onload = setup; +window.onload = setup; \ No newline at end of file diff --git a/style.css b/style.css index 77cb8d4..7df0e89 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,71 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: #f4f4f4; + color: #222; +} + +#episode-count { + max-width: 1200px; + margin: 20px auto; + padding: 0 20px; + font-weight: bold; +} + #root { - color: red; + max-width: 1200px; + margin: 0 auto; + padding: 20px; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.episode-card { + background: white; + border-radius: 10px; + padding: 16px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.episode-card h2 { + font-size: 18px; + text-align: center; + margin-top: 0; + margin-bottom: 16px; +} + +.episode-card img { + width: 100%; + height: auto; + display: block; + border-radius: 6px; +} + +.episode-card p { + line-height: 1.5; + font-size: 14px; +} + +footer { + max-width: 1200px; + margin: 30px auto; + padding: 20px; + text-align: center; +} + +footer a { + color: inherit; +} + +@media (max-width: 900px) { + #root { + grid-template-columns: repeat(2, 1fr); + } } + +@media (max-width: 600px) { + #root { + grid-template-columns: 1fr; + } +} \ No newline at end of file From 704b1af4d97496a51a18ef92363b66a7c9784d79 Mon Sep 17 00:00:00 2001 From: shafiekwalker7861 Date: Mon, 17 Aug 2026 08:50:53 +0200 Subject: [PATCH 5/7] Refactor episode card rendering --- script.js | 59 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 33 insertions(+), 26 deletions(-) diff --git a/script.js b/script.js index 76d662e..8c09dba 100644 --- a/script.js +++ b/script.js @@ -1,42 +1,49 @@ // You can edit ALL of the code here -function setup() { - const allEpisodes = getAllEpisodes(); - makePageForEpisodes(allEpisodes); -} +function getEpisodeCode(episode) { + const seasonNumber = String(episode.season).padStart(2, "0"); + const episodeNumber = String(episode.number).padStart(2, "0"); -function makePageForEpisodes(episodeList) { - const rootElem = document.getElementById("root"); - const episodeCount = document.getElementById("episode-count"); + return `S${seasonNumber}E${episodeNumber}`; +} - episodeCount.textContent = `Got ${episodeList.length} episode(s)`; +function createEpisodeCard(episode) { + const episodeCard = document.createElement("div"); + episodeCard.classList.add("episode-card"); - for (const episode of episodeList) { - const episodeName = episode.name; + const heading = document.createElement("h2"); + heading.textContent = `${episode.name} - ${getEpisodeCode(episode)}`; - const seasonNumber = String(episode.season).padStart(2, "0"); - const episodeNumber = String(episode.number).padStart(2, "0"); - const episodeCode = `S${seasonNumber}E${episodeNumber}`; + const episodeImage = document.createElement("img"); + episodeImage.src = episode.image.medium; + episodeImage.alt = `Image for ${episode.name}`; - const episodeCard = document.createElement("div"); - episodeCard.classList.add("episode-card"); + const episodeSummary = document.createElement("div"); + episodeSummary.innerHTML = episode.summary; - const heading = document.createElement("h2"); - heading.textContent = `${episodeName} - ${episodeCode}`; + episodeCard.appendChild(heading); + episodeCard.appendChild(episodeImage); + episodeCard.appendChild(episodeSummary); - const episodeImage = document.createElement("img"); - episodeImage.src = episode.image.medium; - episodeImage.alt = `Image for ${episodeName}`; + return episodeCard; +} - const episodeSummary = document.createElement("div"); - episodeSummary.innerHTML = episode.summary; +function makePageForEpisodes(episodeList) { + const rootElem = document.getElementById("root"); + const episodeCount = document.getElementById("episode-count"); - episodeCard.appendChild(heading); - episodeCard.appendChild(episodeImage); - episodeCard.appendChild(episodeSummary); + rootElem.textContent = ""; + episodeCount.textContent = `Got ${episodeList.length} episode(s)`; + episodeList.forEach((episode) => { + const episodeCard = createEpisodeCard(episode); rootElem.appendChild(episodeCard); - } + }); +} + +function setup() { + const allEpisodes = getAllEpisodes(); + makePageForEpisodes(allEpisodes); } window.onload = setup; \ No newline at end of file From c625529aac9e1e73022ebbd2c6f42d43379e93cf Mon Sep 17 00:00:00 2001 From: shafiekwalker7861 Date: Mon, 17 Aug 2026 13:53:18 +0200 Subject: [PATCH 6/7] Add partner live episode search --- script.js | 41 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 8c09dba..2163469 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,7 @@ // You can edit ALL of the code here +let allEpisodes = []; + function getEpisodeCode(episode) { const seasonNumber = String(episode.season).padStart(2, "0"); const episodeNumber = String(episode.number).padStart(2, "0"); @@ -33,7 +35,8 @@ function makePageForEpisodes(episodeList) { const episodeCount = document.getElementById("episode-count"); rootElem.textContent = ""; - episodeCount.textContent = `Got ${episodeList.length} episode(s)`; + episodeCount.textContent = + `Displaying ${episodeList.length} / ${allEpisodes.length} episodes`; episodeList.forEach((episode) => { const episodeCard = createEpisodeCard(episode); @@ -41,8 +44,42 @@ function makePageForEpisodes(episodeList) { }); } +function setupSearch() { + const searchInput = document.createElement("input"); + searchInput.type = "search"; + searchInput.id = "search-input"; + searchInput.placeholder = "Search by name or summary"; + + const label = document.createElement("label"); + label.setAttribute("for", "search-input"); + label.textContent = "Search episodes: "; + + const rootElem = document.getElementById("root"); + + rootElem.parentNode.insertBefore(searchInput, rootElem); + rootElem.parentNode.insertBefore(label, searchInput); + + searchInput.addEventListener("input", function () { + const searchTerm = searchInput.value.toLowerCase().trim(); + + const filteredEpisodes = allEpisodes.filter((episode) => { + const episodeName = episode.name.toLowerCase(); + const episodeSummary = (episode.summary || "").toLowerCase(); + + return ( + episodeName.includes(searchTerm) || + episodeSummary.includes(searchTerm) + ); + }); + + makePageForEpisodes(filteredEpisodes); + }); +} + function setup() { - const allEpisodes = getAllEpisodes(); + allEpisodes = getAllEpisodes(); + + setupSearch(); makePageForEpisodes(allEpisodes); } From 7fb08edfc706eef4e121d3df2d0b1da0f2c6b1c8 Mon Sep 17 00:00:00 2001 From: shafiekwalker7861 Date: Mon, 17 Aug 2026 14:01:25 +0200 Subject: [PATCH 7/7] Add partner episode selector --- script.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/script.js b/script.js index 2163469..152e7df 100644 --- a/script.js +++ b/script.js @@ -12,6 +12,7 @@ function getEpisodeCode(episode) { function createEpisodeCard(episode) { const episodeCard = document.createElement("div"); episodeCard.classList.add("episode-card"); + episodeCard.id = `episode-${episode.id}`; const heading = document.createElement("h2"); heading.textContent = `${episode.name} - ${getEpisodeCode(episode)}`; @@ -35,6 +36,7 @@ function makePageForEpisodes(episodeList) { const episodeCount = document.getElementById("episode-count"); rootElem.textContent = ""; + episodeCount.textContent = `Displaying ${episodeList.length} / ${allEpisodes.length} episodes`; @@ -76,10 +78,66 @@ function setupSearch() { }); } +function setupEpisodeSelector() { + const rootElem = document.getElementById("root"); + + const selectorContainer = document.createElement("div"); + + const label = document.createElement("label"); + label.setAttribute("for", "episode-selector"); + label.textContent = "Select episode: "; + + const episodeSelector = document.createElement("select"); + episodeSelector.id = "episode-selector"; + + const defaultOption = document.createElement("option"); + defaultOption.value = ""; + defaultOption.textContent = "Choose an episode"; + + episodeSelector.appendChild(defaultOption); + + allEpisodes.forEach((episode) => { + const option = document.createElement("option"); + + option.value = episode.id; + option.textContent = + `${getEpisodeCode(episode)} - ${episode.name}`; + + episodeSelector.appendChild(option); + }); + + selectorContainer.appendChild(label); + selectorContainer.appendChild(episodeSelector); + + rootElem.parentNode.insertBefore(selectorContainer, rootElem); + + episodeSelector.addEventListener("change", function () { + if (episodeSelector.value === "") { + return; + } + + const searchInput = document.getElementById("search-input"); + + searchInput.value = ""; + + makePageForEpisodes(allEpisodes); + + const selectedEpisode = document.getElementById( + `episode-${episodeSelector.value}` + ); + + selectedEpisode.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + }); +} + function setup() { allEpisodes = getAllEpisodes(); setupSearch(); + setupEpisodeSelector(); makePageForEpisodes(allEpisodes); }