From 3c320135543bb98a7ee11e00147c9f455b422a7d Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Thu, 13 Aug 2026 18:53:46 +0100 Subject: [PATCH 1/5] level 0- 100 completed --- index.html | 32 ++++++++++++++++++++--------- script.js | 32 ++++++++++++++++++++++++----- style.css | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 108 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 9a400d1..56c609b 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,35 @@ - + - TV Show Project | My Name (My GitHub username) - - - - - -
-
+ + TV Show Project | Dagim Daniel Dagim-Daniel + + + + + + + +
+ diff --git a/script.js b/script.js index 87a7de8..f0d9edb 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,34 @@ -//You can edit ALL of the code here function setup() { const allEpisodes = getAllEpisodes(); - makePageForEpisodes(allEpisodes); -} -function makePageForEpisodes(episodeList) { + const card = allEpisodes.map(makePageForEpisodes); const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; + rootElem.append(...card); + //makePageForEpisodes(allEpisodes); } +function makePageForEpisodes(episode) { + const filmCard = document + + .getElementById("episode-template") + + .content.cloneNode(true); + + const seasonNumber = episode.season.toString().padStart(2, "0"); + + const episodeNumber = episode.number.toString().padStart(2, "0"); + + const episodeCode = `S${seasonNumber}E${episodeNumber}`; + + filmCard.querySelector(".episode-title").textContent = + `${episode.name}: ${episodeCode}`; + + filmCard.querySelector(".episode-image").src = episode.image.medium; + + filmCard.querySelector(".episode-image").alt = episode.name; + + filmCard.querySelector(".episode-summary").innerHTML = episode.summary; + + return filmCard; +} window.onload = setup; diff --git a/style.css b/style.css index 77cb8d4..a99c2b8 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,60 @@ +body { + background-color: #e0dddd; + margin: 0; + /* Extra space at bottom so fixed footer doesn't hide episode cards */ + padding-bottom: 60px; +} + #root { - color: red; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + padding: 20px; +} + +.episode-card { + background-color: #f5f5f5; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + text-align: left; /* 'justify' often creates readability issues for dyslexic users */ + transition: box-shadow 0.2s ease; +} + +.episode-card:hover { + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +.episode-card:hover .episode-title { + text-decoration: underline; +} + +.episode-title { + margin-top: 0; + font-size: 1.25rem; +} + +.episode-image { + width: 100%; + height: auto; + border-radius: 10px; +} + +.episode-summary { + font-size: 16px; + color: #222; /* Darkened slightly for higher contrast ratio */ + max-height: 150px; + overflow-y: auto; +} + +#bottomBar { + border-top: 1px solid #000; + text-align: center; + position: fixed; + bottom: 0; + left: 0; + background-color: #f5f5f5; + width: 100%; + padding: 10px 0; + z-index: 1000; } From d47eff29414ab9a3a47ffd95bbc5496171df391d Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Thu, 20 Aug 2026 01:00:58 +0100 Subject: [PATCH 2/5] i completed level 200 tasks by adding selector and search --- index.html | 46 ++++++++++++----- script.js | 141 ++++++++++++++++++++++++++++++++++++++++++++++------- style.css | 78 ++++++++++++++++++++++++++--- 3 files changed, 228 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 56c609b..c9cb862 100644 --- a/index.html +++ b/index.html @@ -3,19 +3,35 @@ - - - - - - - - TV Show Project | Dagim Daniel Dagim-Daniel + TV Show Project | Dagim Daniel + + +
+
+ + +
+ +
+ + +
+ +

Displaying 0 / 0 episodes

+
+ -
-