diff --git a/index.html b/index.html index a0038e4..9854a81 100644 --- a/index.html +++ b/index.html @@ -10,18 +10,24 @@
+ -

- Displaying / +

+ Displaying / episodes

diff --git a/script.js b/script.js index 580f7ab..560cc28 100644 --- a/script.js +++ b/script.js @@ -1,41 +1,64 @@ // You can edit ALL of the code here let allEpisodes = []; -async function fetchData() { - try { - const response = await fetch("https://api.tvmaze.com/shows/82/episodes"); - if (!response.ok) { - throw new Error("Network response was not ok."); - } - const data = await response.json(); - allEpisodes = data; - render(allEpisodes); - generateOpt(allEpisodes); - } catch (error) { - console.error("Error fetching data:", error.message); - // Display an error message to the user - const errorMessage = document.createElement("p"); - errorMessage.textContent = "Error loading data. Please try again later."; - document.body.appendChild(errorMessage); - } +async function fetchData(showId) { + fetch(`https://api.tvmaze.com/shows/${showId}/episodes`) + .then((response) => response.json()) + .then((data) => { + allEpisodes = data; + render(data); + generateEpisodeOptions(data); + }); } -fetchData(); +function fetchShows() { + fetch(`https://api.tvmaze.com/shows`) + .then((response) => response.json()) + .then((data) => { + data.sort((a, b) => { + if (a.name.toLowerCase() > b.name.toLowerCase()) { + return 1; + } else if (a.name.toLowerCase() < b.name.toLowerCase()) { + return -1; + } else { + return 0; + } + }); + generateShowOptions(data); + }); +} + +document.querySelector("#selectShow").addEventListener("change", () => { + fetchData(document.querySelector("#selectShow").value); +}); + +fetchShows(); + +function generateShowOptions(shows) { + shows.forEach((show) => { + const selectShow = document.querySelector("#selectShow"); + const option = document.createElement("option"); + option.value = show.id; + option.innerText = show.name; + selectShow.append(option); + }); +} function render(episodeList) { const rootElem = document.getElementById("root"); rootElem.innerHTML = ""; // Clear existing content episodeList.forEach((episode) => { - const episodeCode = `S${episode.season - .toString() - .padStart(2, "0")}E${episode.number.toString().padStart(2, "0")}`; + const episodeCode = `S${episode.season.toString().padStart(2, "0")}E${episode.number.toString().padStart(2, "0")}`; const episodeElem = document.createElement("div"); episodeElem.classList.add("episode"); + const imageSrc = episode.image && episode.image.medium ? episode.image.medium : ""; + const imageAlt = episode.name || "Episode Image"; + episodeElem.innerHTML = `

${episode.name} - ${episodeCode}

- ${episode.name} + ${imageAlt}

${episode.summary}

For more information

`; @@ -48,19 +71,15 @@ function render(episodeList) { document.getElementById("countOfEpisodes").innerText = allEpisodes.length; } -function generateOpt(allEpisodes) { +function generateEpisodeOptions(episodes) { const select = document.getElementById("select"); select.innerHTML = ""; - const optionD = document.createElement("option"); optionD.setAttribute("value", "default"); optionD.innerText = "All episodes"; select.append(optionD); - allEpisodes.forEach((episode) => { - const episodeCode = `S${episode.season - .toString() - .padStart(2, "0")}E${episode.number.toString().padStart(2, "0")}`; - + episodes.forEach((episode) => { + const episodeCode = `S${episode.season.toString().padStart(2, "0")}E${episode.number.toString().padStart(2, "0")}`; const option = document.createElement("option"); option.setAttribute("value", episode.id); option.innerText = `${episodeCode} - ${episode.name}`; @@ -71,24 +90,36 @@ function generateOpt(allEpisodes) { // Filter function for updating the searched list of episodes const searchInput = document.getElementById("q"); searchInput.addEventListener("keyup", () => { + document.getElementById("select").value = "default"; const inputValue = searchInput.value.toLowerCase(); - const filteredEpisodes = allEpisodes.filter( - (episode) => - episode.name.toLowerCase().includes(inputValue) || - episode.summary.toLowerCase().includes(inputValue) - ); - render(filteredEpisodes); + + if (searchInput.value === "") { + render(allEpisodes); + } else if (searchInput.value != "") { + let filteredEpisodes = allEpisodes.filter((episode) => + episode.name + ? episode.name.toLowerCase().includes(inputValue) + : false || episode.summary + ? episode.summary.toLowerCase().includes(inputValue) + : false + ); + render(filteredEpisodes); + + document.getElementById("countOfEpisodes").innerText = filteredEpisodes.length; + } }); const select = document.getElementById("select"); -select.addEventListener("change", () => { - const selectedValue = select.value; +select.addEventListener("change", (event) => { + document.getElementById("q").value = ""; + + const selectedValue = event.target.value; if (selectedValue === "default") { render(allEpisodes); + document.getElementById("countOfEpisodes").innerText = allEpisodes.length; } else { - const selectedEpisode = allEpisodes.find( - (episode) => episode.id === parseInt(selectedValue) - ); + const selectedEpisode = allEpisodes.find((episode) => episode.id === parseInt(selectedValue)); render([selectedEpisode]); + document.getElementById("countOfEpisodes").innerText = 1; } });