diff --git a/index.html b/index.html index 9a400d1..6935d9f 100644 --- a/index.html +++ b/index.html @@ -3,19 +3,33 @@ - TV Show Project | My Name (My GitHub username) + TV Show Project | Rahwa Zeslus Haile -
-
+ + - - +
+ + - + diff --git a/script.js b/script.js index 87a7de8..4ae284a 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,42 @@ -//You can edit ALL of the code here function setup() { const allEpisodes = getAllEpisodes(); makePageForEpisodes(allEpisodes); + populateDropdown(allEpisodes); + setupSearch(allEpisodes); + setupDropdown(allEpisodes); } -function makePageForEpisodes(episodeList) { - const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; +function zeroPad(num) { + return num.toString().padStart(2, "0"); } +function makePageForEpisodes(episodes) { + const root = document.getElementById("root"); + root.innerHTML = ""; + + const template = document.getElementById("episode-template"); + + episodes.forEach((ep) => { + const episodeCode = `S${zeroPad(ep.season)}E${zeroPad(ep.number)}`; + const clone = template.content.cloneNode(true); + + clone.querySelector("a").href = ep.url; + clone.querySelector(".episode-name").textContent = ep.name; + clone.querySelector(".episode-code").textContent = episodeCode; + + const img = clone.querySelector("img"); + img.src = ep.image.medium; + img.alt = `Image from ${ep.name}`; + + clone.querySelector(".episode-summary").innerHTML = ep.summary; + + root.appendChild(clone); + }); + + const count = document.getElementById("episodeCount"); + count.textContent = `Displaying ${episodes.length} episode(s)`; +} + + + window.onload = setup; diff --git a/style.css b/style.css index 77cb8d4..d1ded06 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,79 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + background: #f7f7f7; + padding: 1rem; +} + +#controls { + display: flex; + flex-wrap: wrap; + gap: 1rem; + align-items: center; + justify-content: space-between; + padding: 1rem; + background: #ffffff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 1rem; +} + +#searchInput, +#episodeSelect { + padding: 0.5rem; + font-size: 1rem; + max-width: 300px; + width: 100%; +} + +#episodeCount { + font-weight: bold; + font-size: 1rem; + margin-left: auto; + white-space: nowrap; +} + #root { - color: red; + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: center; +} + +.episode-card { + background: white; + border-radius: 8px; + overflow: hidden; + max-width: 300px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.episode-card img { + width: 100%; + height: auto; + display: block; +} + +.episode-header { + padding: 0.75rem; + background: #1e1e1e; + color: white; + font-size: 1rem; + font-weight: bold; + text-align: center; +} + +.shadow-box { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); +} + +.episode-summary { + padding: 0.75rem; + font-size: 0.9rem; +} + +footer { + text-align: center; + margin-top: 2rem; + padding: 1rem; + font-size: 0.9rem; }