From 6b48f66b1b2a00c46dc768a314a6621e4d6e4d40 Mon Sep 17 00:00:00 2001 From: hasandemiroz <64849417+hasandemiroz@users.noreply.github.com> Date: Thu, 17 Apr 2025 12:00:50 +0100 Subject: [PATCH 1/2] index file update --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 9a400d1..83e2fe0 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - TV Show Project | My Name (My GitHub username) + TV Show Project | Hasan Demiroz (hasandemiroz) From 104598f5c0d9855d74684bcdb2e8eb47754ec834 Mon Sep 17 00:00:00 2001 From: hasandemiroz <64849417+hasandemiroz@users.noreply.github.com> Date: Sat, 19 Apr 2025 15:24:10 +0100 Subject: [PATCH 2/2] level-100 changes and updates --- index.html | 35 ++++++++++++++++-------------- script.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++- style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 132 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 83e2fe0..494d9bb 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,24 @@ - - - - TV Show Project | Hasan Demiroz (hasandemiroz) - - - - -
-
+ + + + TV Show Project | Hasan Demiroz (hasandemiroz) + + + - - + +
+

TV Show Project

+
- - - - + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js index 87a7de8..099ab23 100644 --- a/script.js +++ b/script.js @@ -6,7 +6,59 @@ function setup() { function makePageForEpisodes(episodeList) { const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; +// rootElem.textContent = `Got ${episodeList.length} episode(s)`; + + + const episodesContainer = document.createElement('div'); + episodesContainer.id = 'episodes-container'; + rootElem.appendChild(episodesContainer); + + function pad(num) { + return num.toString().padStart(2, '0'); + } + + episodeList.forEach(episode => { + const card = document.createElement('div'); + card.id = 'episode-card'; + + const episodeCode = `S${pad(episode.season)}E${pad(episode.number)}`; + + const name = document.createElement('h2'); + name.textContent = episode.name; + + const img = document.createElement('img'); + img.src = episode.image?.medium || ''; + img.alt = episode.name; + + const season = document.createElement('p'); + season.id = 'episode-code'; + season.textContent = episodeCode; + + const summary = document.createElement('div'); + summary.id = 'episode-summary'; + summary.innerHTML = episode.summary || ''; + + const link = document.createElement('a'); + link.href = episode.url; + link.target = '_blank'; + link.rel = 'noopener noreferrer'; + link.textContent = 'View on TVMaze'; + + card.appendChild(name); + card.appendChild(season); + card.appendChild(img); + card.appendChild(summary); + card.appendChild(link); + + episodesContainer.appendChild(card); + + }); + + + const credit = document.createElement('p'); + credit.innerHTML = `Data originally from TVMaze.com`; + rootElem.appendChild(credit); + } window.onload = setup; diff --git a/style.css b/style.css index 77cb8d4..5fee39d 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,61 @@ -#root { - color: red; +body{ + background-color: #BDDDE4; } +#episodes-container { + display: flex; + flex-wrap: wrap; + gap: 2rem; + justify-content: center; + margin-top: 1rem; +} + +#episode-card { + border: 1px solid white; + border-radius: 5px; + padding: 1rem; + flex: 0 1 calc(33.333% - 2rem); + width: 300px; + text-align: center; + box-sizing: border-box; + background: white; + margin-bottom: 2rem; + display: flex; + flex-direction: column; + align-items: center; +} + +#episode-card img { + width: 100%; + height: auto; +} + +#episode-card h2 { + font-size: 1.2rem; + border: 1px solid black; + border-radius: 4px; + width: 100%; + padding: 0.5rem 0; +} + +#episode-code { + display: block; + font-weight: bold; + margin-bottom: 0.5rem; +} + +#episode-card a { + display: inline-block; + margin-top: 1rem; + padding: 0.5rem 1rem; + background: #0077cc; + color: white; + border-radius: 4px; + text-decoration: none; +} + +#root > p { + text-align: center; + font-size: 1rem; + margin: 1rem 0; + width: 100%; +} \ No newline at end of file