From f2eff204baa9be05ab87d700702c68a2c9372bed Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Thu, 30 Jul 2026 01:32:15 +0100 Subject: [PATCH 01/28] Add my name and GitHub username to page title --- index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9a400d1..b7c7974 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,15 @@ - + - TV Show Project | My Name (My GitHub username) + TV Show Project | Sandani Kannangara (SandzSoft) -
-
+
From 2d90e9c0654520f178e3a92ae92476e27e526daf Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Thu, 30 Jul 2026 05:36:16 +0100 Subject: [PATCH 02/28] Display all TV episodes with dynamic cards --- index.html | 11 ++++++++++- script.js | 37 ++++++++++++++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b7c7974..82cdcd4 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,16 @@ -
+
+ diff --git a/script.js b/script.js index 87a7de8..0e407d9 100644 --- a/script.js +++ b/script.js @@ -6,7 +6,42 @@ function setup() { function makePageForEpisodes(episodeList) { const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; + const episodeCards = episodeList.map(createEpisodeCard); + + rootElem.append(...episodeCards); +} + +function createEpisodeCard({ + url, + name, + season, + number, + image: { medium }, + summary, +}) { + const episodeCard = document.createElement("article"); + + const title = document.createElement("h2"); + title.textContent = + name + + ` - S${String(season).padStart(2, "0")}E${String(number).padStart(2, "0")}`; + + const img = document.createElement("img"); + img.src = medium; + img.alt = `${name} episode image`; + + const aElement = document.createElement("a"); + aElement.href = url; + aElement.textContent = "View on TVMaze"; + aElement.target = "_blank"; + aElement.rel = "noopener noreferrer"; + + const summaryElement = document.createElement("div"); + summaryElement.innerHTML = summary; + + episodeCard.append(title, img, summaryElement, aElement); + + return episodeCard; } window.onload = setup; From cbf28170fbc3d5364f16d8c22e13e3e70f4b1ddf Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Thu, 30 Jul 2026 19:52:31 +0100 Subject: [PATCH 03/28] Add style to TV show page --- script.js | 1 + style.css | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 89 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 0e407d9..941b231 100644 --- a/script.js +++ b/script.js @@ -37,6 +37,7 @@ function createEpisodeCard({ aElement.rel = "noopener noreferrer"; const summaryElement = document.createElement("div"); + summaryElement.classList.add("summary"); summaryElement.innerHTML = summary; episodeCard.append(title, img, summaryElement, aElement); diff --git a/style.css b/style.css index 77cb8d4..6628749 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,90 @@ +body { + margin: 0; + padding: 2rem; + min-height: 100vh; + + font-family: Arial, Helvetica, sans-serif; + background-color: #eef2f7; + color: #2d3748; +} + #root { - color: red; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 2rem; + max-width: 1500px; + margin: 0 auto; +} + +article { + background: #ffffff; + border: 1px solid #d9e2ec; + border-radius: 12px; + overflow: hidden; + + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + + display: flex; + flex-direction: column; +} + +h2 { + margin: 0; + padding: 1rem; + + background-color: #1f4e79; + color: white; + + text-align: center; + font-size: 1.2rem; + line-height: 1.4; +} + +img { + display: block; + width: 100%; + height: auto; +} + +.summary { + padding: 1rem; + line-height: 1.6; + color: #444; + flex-grow: 1; +} + +a { + display: block; + margin: 0 1rem 1rem; + text-align: center; + + color: #1f4e79; + font-weight: bold; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +footer { + margin-top: 3rem; + padding: 1.25rem; + + text-align: center; + + background-color: #1f4e79; + color: #ffffff; + + border-top: 3px solid #163a5c; +} + +footer a { + color: #ffffff; + font-weight: 600; + text-decoration: none; } + +footer a:hover { + text-decoration: underline; +} \ No newline at end of file From 070fb8f1492811ad34c329c85fcdb98a79682185 Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Thu, 30 Jul 2026 22:20:18 +0100 Subject: [PATCH 04/28] Add lazy loading and meta description --- index.html | 4 ++++ script.js | 1 + 2 files changed, 5 insertions(+) diff --git a/index.html b/index.html index 82cdcd4..e1a4df5 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,10 @@ + TV Show Project | Sandani Kannangara (SandzSoft) diff --git a/script.js b/script.js index 941b231..423feff 100644 --- a/script.js +++ b/script.js @@ -29,6 +29,7 @@ function createEpisodeCard({ const img = document.createElement("img"); img.src = medium; img.alt = `${name} episode image`; + img.loading = "lazy"; const aElement = document.createElement("a"); aElement.href = url; From 354658fa461373e3a3bb36aa0ffb288d9da018d6 Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Fri, 31 Jul 2026 14:30:21 +0100 Subject: [PATCH 05/28] Enhance TV show page design --- script.js | 2 ++ style.css | 103 ++++++++++++++++++++++++++++++++---------------------- 2 files changed, 64 insertions(+), 41 deletions(-) diff --git a/script.js b/script.js index 423feff..808154e 100644 --- a/script.js +++ b/script.js @@ -29,6 +29,8 @@ function createEpisodeCard({ const img = document.createElement("img"); img.src = medium; img.alt = `${name} episode image`; + img.width = 210; + img.height = 118; img.loading = "lazy"; const aElement = document.createElement("a"); diff --git a/style.css b/style.css index 6628749..2e8ab17 100644 --- a/style.css +++ b/style.css @@ -1,90 +1,111 @@ body { + font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif; + background-color: #f8fafc; + color: #334155; + min-height: 100vh; margin: 0; padding: 2rem; - min-height: 100vh; - - font-family: Arial, Helvetica, sans-serif; - background-color: #eef2f7; - color: #2d3748; } +/* Episode cards container */ #root { display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; - max-width: 1500px; + max-width: 1400px; margin: 0 auto; } +/* Episode card */ article { - background: #ffffff; - border: 1px solid #d9e2ec; - border-radius: 12px; + background-color: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 16px; overflow: hidden; + box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); + transition: transform 0.25s ease, box-shadow 0.25s ease; +} - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); - - display: flex; - flex-direction: column; +article:hover { + transform: translateY(-6px); + box-shadow: 0 12px 25px rgba(15, 23, 42, 0.15); } +/* Episode title */ h2 { margin: 0; padding: 1rem; - - background-color: #1f4e79; + background: linear-gradient(135deg, #2563eb, #7c3aed); color: white; - + font-size: 1.1rem; text-align: center; - font-size: 1.2rem; - line-height: 1.4; + letter-spacing: 0.3px; } +/* Episode image */ img { display: block; width: 100%; height: auto; } +/* Episode summary */ .summary { - padding: 1rem; - line-height: 1.6; - color: #444; - flex-grow: 1; + padding: 1.2rem; + color: #475569; + line-height: 1.7; + font-size: 0.95rem; } -a { - display: block; - margin: 0 1rem 1rem; - text-align: center; +.summary p { + margin: 0; +} - color: #1f4e79; - font-weight: bold; +/* TVMaze link inside cards */ +article a { + display: inline-block; + margin: 0 1.2rem 1.2rem; + padding: 0.6rem 1rem; + background-color: #2563eb; + color: white; + border-radius: 999px; text-decoration: none; + font-weight: 600; + transition: background-color 0.2s ease; } -a:hover { - text-decoration: underline; +article a:hover { + background-color: #1d4ed8; } +/* Footer */ footer { - margin-top: 3rem; - padding: 1.25rem; - + max-width: 1400px; + margin: 3rem auto 0; + padding: 1.2rem; text-align: center; - - background-color: #1f4e79; - color: #ffffff; - - border-top: 3px solid #163a5c; + background-color: #e2e8f0; + border-radius: 12px; + color: #475569; } footer a { - color: #ffffff; - font-weight: 600; + color: #2563eb; text-decoration: none; + font-weight: 600; } footer a:hover { text-decoration: underline; +} + +/* Responsive design */ +@media (max-width: 600px) { + body { + padding: 1rem; + } + + #root { + grid-template-columns: 1fr; + } } \ No newline at end of file From 0d122b086427ecd283bbf02bbc423a03b573f4e0 Mon Sep 17 00:00:00 2001 From: Sandani Kannangara Date: Sat, 1 Aug 2026 16:54:54 +0100 Subject: [PATCH 06/28] Enhance TV show page design --- style.css | 98 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 72 insertions(+), 26 deletions(-) diff --git a/style.css b/style.css index 2e8ab17..6b7b56d 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,9 @@ +/* ---------- Global ---------- */ + +* { + box-sizing: border-box; +} + body { font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif; background-color: #f8fafc; @@ -7,85 +13,124 @@ body { padding: 2rem; } -/* Episode cards container */ +/* ---------- Episode Grid ---------- */ + #root { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; max-width: 1400px; margin: 0 auto; } -/* Episode card */ +/* ---------- Episode Card ---------- */ + article { - background-color: #ffffff; + display: flex; + flex-direction: column; + + background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; - box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); - transition: transform 0.25s ease, box-shadow 0.25s ease; + + box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); + + transition: + transform 0.25s ease, + box-shadow 0.25s ease; } article:hover { transform: translateY(-6px); - box-shadow: 0 12px 25px rgba(15, 23, 42, 0.15); + box-shadow: 0 16px 30px rgba(15, 23, 42, 0.15); } -/* Episode title */ +/* ---------- Title ---------- */ + h2 { margin: 0; padding: 1rem; + + min-height: 5rem; + + display: flex; + align-items: center; + justify-content: center; + + text-align: center; + background: linear-gradient(135deg, #2563eb, #7c3aed); color: white; + font-size: 1.1rem; - text-align: center; - letter-spacing: 0.3px; + font-weight: 600; + line-height: 1.4; } -/* Episode image */ +/* ---------- Image ---------- */ + img { display: block; width: 100%; height: auto; } -/* Episode summary */ +/* ---------- Summary ---------- */ + .summary { - padding: 1.2rem; + flex: 1; + + padding: 1.25rem; + color: #475569; line-height: 1.7; - font-size: 0.95rem; + font-size: 0.96rem; } .summary p { margin: 0; } -/* TVMaze link inside cards */ +/* ---------- TVMaze Link ---------- */ + article a { - display: inline-block; - margin: 0 1.2rem 1.2rem; - padding: 0.6rem 1rem; - background-color: #2563eb; + align-self: flex-start; + + margin: 0 1.25rem 1.25rem; + padding: 0.65rem 1.1rem; + + background: #2563eb; color: white; - border-radius: 999px; + text-decoration: none; font-weight: 600; - transition: background-color 0.2s ease; + + border-radius: 999px; + + transition: + background-color 0.2s ease, + transform 0.2s ease; } article a:hover { - background-color: #1d4ed8; + background: #1d4ed8; + transform: scale(1.03); } -/* Footer */ +/* ---------- Footer ---------- */ + footer { max-width: 1400px; margin: 3rem auto 0; - padding: 1.2rem; + + padding: 1.25rem; + text-align: center; - background-color: #e2e8f0; + + background: #e2e8f0; border-radius: 12px; + color: #475569; } @@ -99,7 +144,8 @@ footer a:hover { text-decoration: underline; } -/* Responsive design */ +/* ---------- Mobile ---------- */ + @media (max-width: 600px) { body { padding: 1rem; From 0682fc2fb7d8026916efbfe0d447a0251da2f642 Mon Sep 17 00:00:00 2001 From: Niangh Ciang Date: Tue, 4 Aug 2026 10:35:54 +0100 Subject: [PATCH 07/28] Add episode search UI to HTML structure --- index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/index.html b/index.html index e1a4df5..73d7b93 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,18 @@ +
+ +

+
+