From bb49e495bb95b0e3f851f6afd6a4c98e9cba736f Mon Sep 17 00:00:00 2001 From: fikretellek Date: Thu, 22 Feb 2024 03:06:27 +0000 Subject: [PATCH 1/4] html updated --- index.html | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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

From 476815d783c289f0e8a1cb9de182fcc3ef09de15 Mon Sep 17 00:00:00 2001 From: fikretellek Date: Thu, 22 Feb 2024 03:06:58 +0000 Subject: [PATCH 2/4] fetch shows function added, js updated --- script.js | 91 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 56 insertions(+), 35 deletions(-) diff --git a/script.js b/script.js index 580f7ab..e469e5e 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(allEpisodes); + generateOpt(allEpisodes); + }); +} + +function fetchShows() { + fetch(`https://api.tvmaze.com/shows`) + .then((response) => response.json()) + .then((data) => { + 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); + }); } -fetchData(); +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

`; @@ -51,16 +74,12 @@ function render(episodeList) { function generateOpt(allEpisodes) { 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")}`; - + 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,26 @@ 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) + (episode) => episode.name.toLowerCase().includes(inputValue) || episode.summary.toLowerCase().includes(inputValue) ); 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; } }); From 3f1e88b24b4dd6ab305eaf859349d2a98635dab3 Mon Sep 17 00:00:00 2001 From: fikretellek Date: Thu, 22 Feb 2024 03:24:10 +0000 Subject: [PATCH 3/4] function renamed --- script.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index e469e5e..ba25a47 100644 --- a/script.js +++ b/script.js @@ -7,7 +7,8 @@ async function fetchData(showId) { .then((data) => { allEpisodes = data; render(allEpisodes); - generateOpt(allEpisodes); + generateEpisodeOptions(allEpisodes); + return data; }); } @@ -71,7 +72,7 @@ function render(episodeList) { document.getElementById("countOfEpisodes").innerText = allEpisodes.length; } -function generateOpt(allEpisodes) { +function generateEpisodeOptions(allEpisodes) { const select = document.getElementById("select"); select.innerHTML = ""; const optionD = document.createElement("option"); From e35ff2542ee5fd9407736e6d54735d414e56e7f4 Mon Sep 17 00:00:00 2001 From: fikretellek Date: Thu, 22 Feb 2024 17:30:19 +0000 Subject: [PATCH 4/4] bug (that occurs for episodes with no summary values) in search future fixed --- script.js | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/script.js b/script.js index ba25a47..560cc28 100644 --- a/script.js +++ b/script.js @@ -6,9 +6,8 @@ async function fetchData(showId) { .then((response) => response.json()) .then((data) => { allEpisodes = data; - render(allEpisodes); - generateEpisodeOptions(allEpisodes); - return data; + render(data); + generateEpisodeOptions(data); }); } @@ -16,7 +15,7 @@ function fetchShows() { fetch(`https://api.tvmaze.com/shows`) .then((response) => response.json()) .then((data) => { - data = data.sort((a, b) => { + data.sort((a, b) => { if (a.name.toLowerCase() > b.name.toLowerCase()) { return 1; } else if (a.name.toLowerCase() < b.name.toLowerCase()) { @@ -72,14 +71,14 @@ function render(episodeList) { document.getElementById("countOfEpisodes").innerText = allEpisodes.length; } -function generateEpisodeOptions(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) => { + 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); @@ -93,11 +92,21 @@ 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); - document.getElementById("countOfEpisodes").innerText = filteredEpisodes.length; + + 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");