From 6d30a968289a5283da192a7c76886b714fe8bb30 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 8 Aug 2026 11:07:52 +0100 Subject: [PATCH 01/17] github username and name added to index.html --- index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9a400d1..5f0fb51 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,15 @@ - + - TV Show Project | My Name (My GitHub username) + TV Show Project | Rizqah Popoola (risikatpopoola) -
-
+
From 9ef990b3280741d88974817f323642748e9e3b96 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 8 Aug 2026 13:39:20 +0100 Subject: [PATCH 02/17] level 100 in progress --- index.html | 12 +++++++++--- script.js | 42 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 45 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 9a400d1..174f2bc 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -9,8 +9,14 @@ -
-
+
+ diff --git a/script.js b/script.js index 87a7de8..9312f12 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,42 @@ //You can edit ALL of the code here + +// ## Requirements + +// 1. All episodes must be shown +// 2. For each episode, _at least_ following must be displayed: +// 1. The name of the episode +// 2. The season number +// 3. The episode number +// 4. The medium-sized image for the episode +// 5. The summary text of the episode +// 3. Combine season number and episode number into an **episode code**: +// 1. Each part should be zero-padded to two digits. +// 2. Example: `S02E07` would be the code for the 7th episode of the 2nd season. `S2E7` would be incorrect. +// 4. Your page should state somewhere that the data has (originally) come from [TVMaze.com](https://tvmaze.com/), and link back to that site (or the specific episode on that site). See [tvmaze.com/api#licensing](https://www.tvmaze.com/api#licensing). +// name: "Winter is Coming", +// season: 1, +// number: 1, +// airdate: "2011-04-17", +// airtime: "21:00", +// airstamp: "2011-04-18T01:00:00+00:00", function setup() { - const allEpisodes = getAllEpisodes(); - makePageForEpisodes(allEpisodes); -} + const films = getAllEpisodes(); + console.log(films); + makePageForEpisodes(films); -function makePageForEpisodes(episodeList) { const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; -} + makePageForEpisodes(films, rootElem); + const filmCards = films.map(createFilmCard); + rootElem.append(...filmCards); +} +function createFilmCard(films) { + const card = document.getElementById("film-card").content.cloneNode(true); + // Now we are querying our cloned fragment, not the entire page. + const episodeCode = `S${String(films.season).padStart(2, "0")}E${String(films.number).padStart(2, "0")}`; + card.querySelector("h3").textContent = films.name; + card.querySelector("episodeCode").textContent = episodeCode; + card.querySelector("summary").textContent = films.summary; + return card; +} window.onload = setup; From 57a521ce302e9495a8eb003080f45559720d77bf Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 8 Aug 2026 15:42:20 +0100 Subject: [PATCH 03/17] image added from film --- script.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/script.js b/script.js index 9312f12..dfc6094 100644 --- a/script.js +++ b/script.js @@ -20,23 +20,30 @@ // airtime: "21:00", // airstamp: "2011-04-18T01:00:00+00:00", function setup() { - const films = getAllEpisodes(); - console.log(films); - makePageForEpisodes(films); - + const allEpisodes = getAllEpisodes(); + makePageForEpisodes(allEpisodes); +} +function makePageForEpisodes(episodeList) { const rootElem = document.getElementById("root"); + //rootElem.textContent = `Got ${episodeList.length} episode(s)`; - makePageForEpisodes(films, rootElem); - const filmCards = films.map(createFilmCard); + const filmCards = episodeList.map(createFilmCard); rootElem.append(...filmCards); } -function createFilmCard(films) { + +function createFilmCard(film) { const card = document.getElementById("film-card").content.cloneNode(true); - // Now we are querying our cloned fragment, not the entire page. - const episodeCode = `S${String(films.season).padStart(2, "0")}E${String(films.number).padStart(2, "0")}`; - card.querySelector("h3").textContent = films.name; - card.querySelector("episodeCode").textContent = episodeCode; - card.querySelector("summary").textContent = films.summary; + + const episodeCode = `S${String(film.season).padStart(2, "0")}E${String( + film.number, + ).padStart(2, "0")}`; + card.querySelector("h3").textContent = `${film.name}-${episodeCode}`; + card.querySelector("summary").innerHTML = film.summary; + const image = document.createElement("img"); + image.src = film.image.medium; + + card.append(image); return card; } + window.onload = setup; From b5bcd17e9f71d3a1b1ce973ec61d15252c1b7abc Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 8 Aug 2026 15:42:25 +0100 Subject: [PATCH 04/17] image added 2 --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 174f2bc..3def8b6 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,6 @@ From 38d556658e274b6b9e20881b434aef45f9d652d8 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 8 Aug 2026 21:24:44 +0100 Subject: [PATCH 05/17] level 100 completed --- index.html | 1 + style.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 86 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3def8b6..f9f36f3 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ diff --git a/style.css b/style.css index 77cb8d4..2111265 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,87 @@ +:root { + --dark: #1c1d21; + --purple: #a288a6; + --mauve: #bb9bb0; + --grey-pink: #ccbcbc; + --cream-pink: #f1e3e4; + + --font: 100%/1.5 system-ui; +} + +/*Base Elements*/ + +body { + background: var(--dark); + color: var(--cream-pink); + font: var(--font); + margin: 0; + padding: 30px; +} + +/* Episode Layout*/ + #root { - color: red; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 25px; + padding: 20px; +} + +/* Episode Cards */ + +section { + background: var(--cream-pink); + color: var(--dark); + border: 3px solid var(--purple); + border-radius: 15px; + padding: 20px; + margin: 5px; + box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); +} + +/*Episode Title */ + +h3 { + text-align: center; + color: var(--dark); + margin-top: 0; + margin-bottom: 10px; +} + +/*Episode Code */ + +episodeCode { + display: block; + text-align: center; + color: var(--purple); + font-weight: bold; + margin-bottom: 15px; +} + +/*Summary*/ + +summary { + color: var(--dark); +} + +/*Episode Image */ + +img { + display: block; + width: 100%; + border-radius: 10px; + margin: 15px 0; + border: 2px solid var(--mauve); +} +footer { + font-size: 20px; + text-align: center; + margin-top: 40px; + padding: 20px; + color: #ccbcbc; + border-top: 1px solid #a288a6; +} + +footer a { + color: #f1e3e4; } From af32695b9cb4df71a7eb68d98d8e6596300a3454 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 8 Aug 2026 21:24:57 +0100 Subject: [PATCH 06/17] level 200 completed --- script.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index dfc6094..90ba263 100644 --- a/script.js +++ b/script.js @@ -29,6 +29,14 @@ function makePageForEpisodes(episodeList) { const filmCards = episodeList.map(createFilmCard); rootElem.append(...filmCards); + const attribution = document.createElement("p"); + const tvMazeLink = document.createElement("a"); + tvMazeLink.href = "https://tvmaze.com/"; + tvMazeLink.textContent = "TVMaze.com"; + attribution.append("Data originally sourced from ", tvMazeLink); + const footer = document.createElement("footer"); + footer.append(attribution); + document.body.append(footer); } function createFilmCard(film) { @@ -37,13 +45,9 @@ function createFilmCard(film) { const episodeCode = `S${String(film.season).padStart(2, "0")}E${String( film.number, ).padStart(2, "0")}`; - card.querySelector("h3").textContent = `${film.name}-${episodeCode}`; + card.querySelector("h3").textContent = `${film.name} - ${episodeCode}`; + card.querySelector("img").src = film.image.medium; card.querySelector("summary").innerHTML = film.summary; - const image = document.createElement("img"); - image.src = film.image.medium; - - card.append(image); return card; } - window.onload = setup; From 61b6965aa4be89caf7291a5cc619c8a022ef70c6 Mon Sep 17 00:00:00 2001 From: Dipa-Sarker Date: Sun, 9 Aug 2026 22:10:27 +0100 Subject: [PATCH 07/17] refactored level 100 --- index.html | 4 ++-- script.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d7025d7..7dc7b90 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,11 @@ -
+
diff --git a/script.js b/script.js index 90ba263..82a6f75 100644 --- a/script.js +++ b/script.js @@ -48,6 +48,7 @@ function createFilmCard(film) { card.querySelector("h3").textContent = `${film.name} - ${episodeCode}`; card.querySelector("img").src = film.image.medium; card.querySelector("summary").innerHTML = film.summary; + card.querySelector("#episode-image").alt = film.name; return card; } window.onload = setup; From 2ca47aef5792e24f9ef9269b3d30fdb188d785c5 Mon Sep 17 00:00:00 2001 From: Dipa-Sarker Date: Sun, 9 Aug 2026 22:34:11 +0100 Subject: [PATCH 08/17] Refactor Level 100 code --- index.html | 6 +++--- script.js | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 7dc7b90..fc3150b 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -10,10 +10,10 @@
-