diff --git a/index.html b/index.html index 9a400d1..25f1821 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,26 @@ - + - TV Show Project | My Name (My GitHub username) + TV Show Project - - - + +
+
+

TV Show Episode Explorer

+ + +

+
+
- - - - - + + \ No newline at end of file diff --git a/script.js b/script.js index 87a7de8..6b8f50a 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,79 @@ -//You can edit ALL of the code here +// script.js function setup() { const allEpisodes = getAllEpisodes(); makePageForEpisodes(allEpisodes); + setupSearch(allEpisodes); + setupEpisodeSelect(allEpisodes); } function makePageForEpisodes(episodeList) { - const rootElem = document.getElementById("root"); - rootElem.textContent = `Got ${episodeList.length} episode(s)`; + const episodeContainer = document.getElementById("episodeContainer"); + episodeContainer.innerHTML = ""; + + episodeList.forEach(episode => { + const article = document.createElement("article"); + article.classList.add("article"); + + const title = document.createElement("h2"); + title.textContent = `${episode.name} - S${padNumber(episode.season)}E${padNumber(episode.number)}`; + article.appendChild(title); + + if (episode.image && episode.image.medium) { + const image = document.createElement("img"); + image.src = episode.image.medium; + image.alt = episode.name; + article.appendChild(image); + } + + const summary = document.createElement("p"); + summary.innerHTML = episode.summary || "No summary available."; + article.appendChild(summary); + + episodeContainer.appendChild(article); + }); + + displayEpisodeCount(episodeList.length, getAllEpisodes().length) +} + +function padNumber(number) { + return number.toString().padStart(2, '0'); +} + +function setupSearch(allEpisodes) { + const searchInput = document.getElementById("searchInput"); + searchInput.addEventListener("input", (event) => { + const searchTerm = event.target.value.toLowerCase(); + const filteredEpisodes = allEpisodes.filter(episode => { + return episode.name.toLowerCase().includes(searchTerm) || + (episode.summary && episode.summary.toLowerCase().includes(searchTerm)); + }); + makePageForEpisodes(filteredEpisodes); + }); +} + +function setupEpisodeSelect(allEpisodes) { + const episodeSelect = document.getElementById("episodeSelect"); + allEpisodes.forEach(episode => { + const option = document.createElement("option"); + option.value = episode.id; + option.textContent = `S${padNumber(episode.season)}E${padNumber(episode.number)} - ${episode.name}`; + episodeSelect.appendChild(option); + }); + + episodeSelect.addEventListener("change", (event) => { + const selectedId = parseInt(event.target.value); + if (selectedId) { + const selectedEpisode = allEpisodes.find(episode => episode.id === selectedId); + makePageForEpisodes([selectedEpisode]); + } else { + makePageForEpisodes(allEpisodes); + } + }); +} + +function displayEpisodeCount(displayed, total){ + const displayCount = document.getElementById("displayCount"); + displayCount.textContent = `Displaying ${displayed} / ${total} episodes`; } -window.onload = setup; +window.onload = setup; \ No newline at end of file diff --git a/style.css b/style.css index 77cb8d4..513413f 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,62 @@ +body { + font-family: sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + #root { - color: red; + width: 90%; + max-width: 1200px; + margin: 20px auto; +} + +header { + background-color:skyblue; + color: #fff; + padding: 15px; + text-align: center; + border-radius: 8px; + margin-bottom: 20px; +} + +header h1 { + margin: 0 0 10px 0; +} + +header input, header select { + padding: 8px; + margin: 5px; + border-radius: 4px; + border: 1px solid #ddd; +} + +#episodeContainer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; +} + +.article { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 8px; + padding: 15px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.article img { + max-width: 100%; + height: auto; + border-radius: 4px; + margin-bottom: 10px; +} + +.article h2 { + margin-top: 0; + font-size: 1.2em; +} + +.article p { + line-height: 1.6; }