From d623a5e21efa0b0a9caa4d05f1c59a8650150c17 Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 09:15:52 +0100 Subject: [PATCH 01/14] update: page tittle update with name and gitHub user name --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9a400d1..ea00f24 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,14 @@ - TV Show Project | My Name (My GitHub username) + TV Show Project | Russom Gebremeskel russom-g
+ hello world
From 01331c758d7a92d89f52df0a7c1424c4210cb0db Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 13:21:17 +0100 Subject: [PATCH 02/14] Elements: create elements for tv show title and summary --- script.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 87a7de8..c509212 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,26 @@ //You can edit ALL of the code here -function setup() { + +console.log("to display?"); + +const tvShow = getOneEpisode(); + +const root = document.getElementById("root"); + +//film.forEach((film) => { + const filmCard = document.createElement("section"); + + const title = document.createElement("h1"); + const summary = document.createElement("p"); + + summary.textContent = tvShow.summary; + title.textContent = tvShow.name; + filmCard.appendChild(title); + filmCard.appendChild(summary); + + root.appendChild(filmCard); +//}); + +/*function setup() { const allEpisodes = getAllEpisodes(); makePageForEpisodes(allEpisodes); } @@ -9,4 +30,4 @@ function makePageForEpisodes(episodeList) { rootElem.textContent = `Got ${episodeList.length} episode(s)`; } -window.onload = setup; +window.onload = setup;*/ From 20c4d4be65da43a6967177b2f43b374a94a8a6fe Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 13:21:58 +0100 Subject: [PATCH 03/14] Comments: hello world commented out --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ea00f24..11aab87 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,13 @@
- hello world +
- + From b9c34c589df50835c7956f21bed122554585f418 Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 15:26:05 +0100 Subject: [PATCH 04/14] element: add h3 and p elements --- index.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/index.html b/index.html index 11aab87..4c82a0c 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,14 @@
+
From f3bf0c74ef71d7ed37bb9a81fbbf7a36c7ec10a4 Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 15:29:22 +0100 Subject: [PATCH 05/14] template: create template for tv show card --- script.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index c509212..a54187e 100644 --- a/script.js +++ b/script.js @@ -4,11 +4,26 @@ console.log("to display?"); const tvShow = getOneEpisode(); + const tvShowCard = document +.getElementById("tv-show-card") +.content.cloneNode(true); + +//console.log(tvShowCard); + + tvShowCard.querySelector("h3").textContent = tvShow.name; + const image = tvShowCard.querySelector("img"); + image.src = tvShow.image.medium; + image.alt = tvShow.name; + tvShowCard.querySelector("p").textContent = tvShow.summary; + + root.appendChild(tvShowCard); + +/* const root = document.getElementById("root"); //film.forEach((film) => { const filmCard = document.createElement("section"); - + const title = document.createElement("h1"); const summary = document.createElement("p"); @@ -18,6 +33,8 @@ const root = document.getElementById("root"); filmCard.appendChild(summary); root.appendChild(filmCard); + */ + //}); /*function setup() { From a07699c13b580e1b74e784c0d0c5cf5311b97e44 Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 16:05:56 +0100 Subject: [PATCH 06/14] display: add padStart method to display season and episode --- script.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/script.js b/script.js index a54187e..23ef91f 100644 --- a/script.js +++ b/script.js @@ -10,16 +10,17 @@ const tvShow = getOneEpisode(); //console.log(tvShowCard); - tvShowCard.querySelector("h3").textContent = tvShow.name; + tvShowCard.querySelector("h3") + .textContent = `${tvShow.name} - S ${String(tvShow.season).padStart(2, "0")}E${String(tvShow.number).padStart(2, "0")}`; const image = tvShowCard.querySelector("img"); image.src = tvShow.image.medium; image.alt = tvShow.name; - tvShowCard.querySelector("p").textContent = tvShow.summary; + tvShowCard.querySelector("p").innerHTML = tvShow.summary; root.appendChild(tvShowCard); /* -const root = document.getElementById("root"); +const root = document.getElementById("root"); use map() //film.forEach((film) => { const filmCard = document.createElement("section"); From f95b0896edf5053c13b0b170f1e3eb6988fa55cf Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 16:06:40 +0100 Subject: [PATCH 07/14] element: p element updated --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4c82a0c..8715ca5 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@ From f9ac42f591f4b1068b14e1dc17e5f4ccb6037735 Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 16:39:41 +0100 Subject: [PATCH 08/14] update: function update to show array of tv show instead of just one. --- script.js | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/script.js b/script.js index 23ef91f..006b606 100644 --- a/script.js +++ b/script.js @@ -1,23 +1,27 @@ //You can edit ALL of the code here -console.log("to display?"); - -const tvShow = getOneEpisode(); - - const tvShowCard = document -.getElementById("tv-show-card") -.content.cloneNode(true); +const tvShows = getAllEpisodes(); + +function createTvShowCard(tvShow) { + const tvShowCard = document + .getElementById("tv-show-card") + .content.cloneNode(true); + + tvShowCard.querySelector("h3").textContent = `${tvShow.name} - S${String( + tvShow.season, + ).padStart(2, "0")}E${String(tvShow.number).padStart(2, "0")}`; + const image = tvShowCard.querySelector("img"); + image.src = tvShow.image.medium; + image.alt = tvShow.name; + tvShowCard.querySelector("p").innerHTML = tvShow.summary; + + return tvShowCard; +} -//console.log(tvShowCard); +const tvShowCards = tvShows.map(createTvShowCard); - tvShowCard.querySelector("h3") - .textContent = `${tvShow.name} - S ${String(tvShow.season).padStart(2, "0")}E${String(tvShow.number).padStart(2, "0")}`; - const image = tvShowCard.querySelector("img"); - image.src = tvShow.image.medium; - image.alt = tvShow.name; - tvShowCard.querySelector("p").innerHTML = tvShow.summary; +root.append(...tvShowCards); - root.appendChild(tvShowCard); /* const root = document.getElementById("root"); use map() From 2dd2738d833d53525d27141dc7f4f3307385ed12 Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 16:41:48 +0100 Subject: [PATCH 09/14] update: p element color change to black --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 77cb8d4..a07ddf2 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,3 @@ #root { - color: red; + color: black; } From 2e838ba9d8cf2e1c341ff024d11980293f70976c Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 16:59:39 +0100 Subject: [PATCH 10/14] Update layout and fonts for tv show display --- style.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/style.css b/style.css index a07ddf2..70fdf45 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,23 @@ #root { color: black; + font-family: Arial, sans-serf; } + +section { + width: 250px; +} + +img { + width: 100%; +} + +h3 { + font-size: 18px; + border: 2px solid black; + padding: 10px; + text-align: centre; +} + +p { + font-size: 14px; +} \ No newline at end of file From c9f0023e55380bd87e0867fc33372cf84b602e18 Mon Sep 17 00:00:00 2001 From: russom Date: Fri, 7 Aug 2026 17:04:00 +0100 Subject: [PATCH 11/14] Update: apply flex box styling into root --- style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/style.css b/style.css index 70fdf45..d847e27 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,9 @@ #root { color: black; font-family: Arial, sans-serf; + display: flex; + flex-wrap: wrap; + gap: 20px; } section { From 03955a5b7506bbd8903e16c3596f9ec4fcd59b8a Mon Sep 17 00:00:00 2001 From: russom Date: Sat, 8 Aug 2026 16:53:53 +0100 Subject: [PATCH 12/14] refactor: update code to refactor and remove dead code. --- script.js | 40 ++++++++++------------------------------ 1 file changed, 10 insertions(+), 30 deletions(-) diff --git a/script.js b/script.js index 006b606..2eefc2a 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,12 @@ //You can edit ALL of the code here -const tvShows = getAllEpisodes(); + +function setup() { + const tvShows = getAllEpisodes(); + const tvShowCards = tvShows.map(createTvShowCard); + + root.append(...tvShowCards); +} function createTvShowCard(tvShow) { const tvShowCard = document @@ -10,6 +16,7 @@ function createTvShowCard(tvShow) { tvShowCard.querySelector("h3").textContent = `${tvShow.name} - S${String( tvShow.season, ).padStart(2, "0")}E${String(tvShow.number).padStart(2, "0")}`; + const image = tvShowCard.querySelector("img"); image.src = tvShow.image.medium; image.alt = tvShow.name; @@ -18,38 +25,11 @@ function createTvShowCard(tvShow) { return tvShowCard; } -const tvShowCards = tvShows.map(createTvShowCard); - -root.append(...tvShowCards); - +window.onload = setup; /* -const root = document.getElementById("root"); use map() - -//film.forEach((film) => { - const filmCard = document.createElement("section"); - - const title = document.createElement("h1"); - const summary = document.createElement("p"); - - summary.textContent = tvShow.summary; - title.textContent = tvShow.name; - filmCard.appendChild(title); - filmCard.appendChild(summary); - - root.appendChild(filmCard); - */ - -//}); - -/*function setup() { - const allEpisodes = getAllEpisodes(); - makePageForEpisodes(allEpisodes); -} - function makePageForEpisodes(episodeList) { const rootElem = document.getElementById("root"); rootElem.textContent = `Got ${episodeList.length} episode(s)`; } - -window.onload = setup;*/ +*/ From 9257ae98ad2f341918ca4e81166065a7a08b67fe Mon Sep 17 00:00:00 2001 From: Yonatan Teklemariam Date: Sun, 9 Aug 2026 08:43:42 +0100 Subject: [PATCH 13/14] added search bar properties to filter out and display films on the UI based on search term input --- index.html | 55 +++++++++++++++++++++++++++++------------------------- script.js | 31 +++++++++++++++++++++--------- 2 files changed, 52 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 8715ca5..cc01296 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,35 @@ - - - - TV Show Project | Russom Gebremeskel russom-g - - - - -
- - -
+ + + + TV Show Project | Russom Gebremeskel russom-g + + + - - + + +
+ +
+ +
- - - - + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js index 2eefc2a..c1a384f 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,10 @@ //You can edit ALL of the code here +const episodeArr = getAllEpisodes(); - -function setup() { - const tvShows = getAllEpisodes(); - const tvShowCards = tvShows.map(createTvShowCard); - - root.append(...tvShowCards); -} +const state = { + episodes: episodeArr, + searchTerm: "", +}; function createTvShowCard(tvShow) { const tvShowCard = document @@ -16,7 +14,7 @@ function createTvShowCard(tvShow) { tvShowCard.querySelector("h3").textContent = `${tvShow.name} - S${String( tvShow.season, ).padStart(2, "0")}E${String(tvShow.number).padStart(2, "0")}`; - + const image = tvShowCard.querySelector("img"); image.src = tvShow.image.medium; image.alt = tvShow.name; @@ -25,8 +23,23 @@ function createTvShowCard(tvShow) { return tvShowCard; } -window.onload = setup; +function render() { + const filteredEpisodes = state.episodes.filter(function (tvshow) { + return tvshow.name.toLowerCase().includes(state.searchTerm.toLowerCase()); + }); + const tvShowCards = filteredEpisodes.map(createTvShowCard); + + document.getElementById("film-box").append(...tvShowCards); +} + +render(); +const searchInput = document.querySelector("input"); +searchInput.addEventListener("keyup", function () { + state.searchTerm = searchInput.value; + document.getElementById("film-box").innerHTML = ""; + render(); +}); /* function makePageForEpisodes(episodeList) { const rootElem = document.getElementById("root"); From 87feff42cd6a974034a13a566f4b0d9a8cdd4511 Mon Sep 17 00:00:00 2001 From: Yonatan Teklemariam Date: Thu, 13 Aug 2026 12:45:51 +0100 Subject: [PATCH 14/14] added dynamic episode counter, restored search behaviour and filtering down by tv show title only --- index.html | 19 +++++++------- sample.js | 39 ++++++++++++++++++++++++++++ script.js | 76 +++++++++++++++++++++++++++++++++++++++--------------- style.css | 26 ++++++++++++------- 4 files changed, 119 insertions(+), 41 deletions(-) create mode 100644 sample.js diff --git a/index.html b/index.html index cc01296..6b15311 100644 --- a/index.html +++ b/index.html @@ -13,18 +13,17 @@ -
- +
+
diff --git a/sample.js b/sample.js new file mode 100644 index 0000000..fcac9ba --- /dev/null +++ b/sample.js @@ -0,0 +1,39 @@ + + + +function setup() { +  const tvShows = getAllEpisodes(); + +  const tvShowCards = tvShows.map(createTvShowCard); + +  root.append(...tvShowCards); +} + +function createTvShowCard(tvShow) { +  const tvShowCard = document +    .getElementById("tv-show-card") +    .content +    .cloneNode(true); + +  const title = tvShowCard.querySelector("h3"); +  title.textContent = `${tvShow.name} - S${String(tvShow.season).padStart( +    2, +    “0”, +  )}E${String(tvShow.number).padStart(2, "0")}`; + +  const image = tvShowCard.querySelector(“img”); +  image.src = tvShow.image.medium; +  image.alt = tvShow.name; + +  const summary = tvShowCard.querySelector(“p”); +  summary.innerHTML = tvShow.summary; + +  const link = tvShowCard.querySelector(“a”); +  link.href = tvShow.url; +  link.textContent = “Source”; +  link.target = “_blank”; + +  return tvShowCard; +} + +window.onload = setup; \ No newline at end of file diff --git a/script.js b/script.js index c1a384f..2b17a4d 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,6 @@ -//You can edit ALL of the code here +const root = document.getElementById("root"); +const searchInput = document.getElementById("q"); const episodeArr = getAllEpisodes(); - const state = { episodes: episodeArr, searchTerm: "", @@ -11,38 +11,72 @@ function createTvShowCard(tvShow) { .getElementById("tv-show-card") .content.cloneNode(true); - tvShowCard.querySelector("h3").textContent = `${tvShow.name} - S${String( - tvShow.season, - ).padStart(2, "0")}E${String(tvShow.number).padStart(2, "0")}`; + const title = tvShowCard.querySelector("h3"); + title.textContent = `${tvShow.name} - S${String(tvShow.season).padStart( + 2, + "0", + )}E${String(tvShow.number).padStart(2, "0")}`; const image = tvShowCard.querySelector("img"); image.src = tvShow.image.medium; image.alt = tvShow.name; - tvShowCard.querySelector("p").innerHTML = tvShow.summary; + + const summary = tvShowCard.querySelector("p"); + summary.innerHTML = tvShow.summary; + + const link = tvShowCard.querySelector("a"); + link.href = tvShow.url; + link.textContent = "Source"; + link.target = "_blank"; return tvShowCard; } -function render() { +function updateCount(list) { + const countElement = document.getElementById("search-count"); + + // If search box is empty → show total episodes + if (state.searchTerm.trim() === "") { + countElement.textContent = `Total episodes: ${state.episodes.length}`; + return; + } + + // If typing → show matching episodes + countElement.textContent = `Matching episodes: ${list.length}`; +} + +function renderEpisodes(list) { + root.innerHTML = ""; + const tvShowCards = list.map(createTvShowCard); + root.append(...tvShowCards); + updateCount(list); +} + +function handleSearch() { + const term = searchInput.value.toLowerCase(); + state.searchTerm = term; + + if (term === "") { + renderEpisodes(state.episodes); + return; + } + const filteredEpisodes = state.episodes.filter(function (tvshow) { - return tvshow.name.toLowerCase().includes(state.searchTerm.toLowerCase()); + const name = tvshow.name.toLowerCase(); + + let summary = ""; + if (tvshow.summary) { + summary = tvshow.summary.toLowerCase(); + } + + return name.indexOf(state.searchTerm.toLowerCase()) !== -1; }); - const tvShowCards = filteredEpisodes.map(createTvShowCard); - document.getElementById("film-box").append(...tvShowCards); + renderEpisodes(filteredEpisodes); } -render(); +renderEpisodes(state.episodes); -const searchInput = document.querySelector("input"); searchInput.addEventListener("keyup", function () { - state.searchTerm = searchInput.value; - document.getElementById("film-box").innerHTML = ""; - render(); + handleSearch(); }); -/* -function makePageForEpisodes(episodeList) { - const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; -} -*/ diff --git a/style.css b/style.css index d847e27..dfbdfee 100644 --- a/style.css +++ b/style.css @@ -1,26 +1,32 @@ #root { - color: black; - font-family: Arial, sans-serf; - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; -} - -section { - width: 250px; + padding: 20px; } img { width: 100%; + height: auto; + display: block; } h3 { font-size: 18px; border: 2px solid black; padding: 10px; - text-align: centre; + text-align: center; } p { font-size: 14px; -} \ No newline at end of file +} + +/* Add basic card styling so the shape is not distorted */ +.card { + width: 250px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 6px; + background: white; +}