diff --git a/index.html b/index.html index 3b73828..32fe4fa 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,7 @@ - - - - TV Show Project | Amirhossein Aminian - - - +
diff --git a/script.js b/script.js index 8093d14..8b13789 100644 --- a/script.js +++ b/script.js @@ -1,90 +1 @@ -document.addEventListener("DOMContentLoaded", () => { - const API_URL = "https://api.tvmaze.com/shows/82/episodes"; - const root = document.getElementById("root"); - const searchBar = document.getElementById("searchBar"); - const episodeSelector = document.getElementById("episodeSelector"); - const episodeCount = document.getElementById("episodeCount"); - let episodes = []; // Store episodes to prevent multiple fetches - - // Function to fetch episodes from API - async function fetchEpisodes() { - try { - root.innerHTML = "

Loading episodes...

"; // Show loading message - - const response = await fetch(API_URL); - if (!response.ok) throw new Error("Failed to fetch episodes."); - - episodes = await response.json(); - displayEpisodes(episodes); - populateDropdown(episodes); - } catch (error) { - root.innerHTML = `

Error loading episodes. Please try again later.

`; - console.error("Fetch Error:", error); - } - } - - // Function to display episodes - function displayEpisodes(episodeList) { - root.innerHTML = ""; // Clear previous content - if (episodeList.length === 0) { - root.innerHTML = "

No episodes found.

"; - return; - } - - episodeList.forEach((episode) => { - const episodeCard = document.createElement("div"); - episodeCard.className = "episode-card"; - episodeCard.innerHTML = ` -

${formatEpisodeTitle(episode)}

- ${episode.name} -

${episode.summary || "No summary available."}

- More info - `; - root.appendChild(episodeCard); - }); - - episodeCount.textContent = `Displaying ${episodeList.length} / ${episodes.length} episodes`; - } - - // Function to format episode title - function formatEpisodeTitle(episode) { - const season = episode.season.toString().padStart(2, "0"); - const number = episode.number.toString().padStart(2, "0"); - return `S${season}E${number} - ${episode.name}`; - } - - // Function to populate dropdown menu - function populateDropdown(episodeList) { - episodeSelector.innerHTML = ''; - episodeList.forEach((episode) => { - const option = document.createElement("option"); - option.value = episode.id; - option.textContent = formatEpisodeTitle(episode); - episodeSelector.appendChild(option); - }); - } - - // Event listener for search - searchBar.addEventListener("input", () => { - const query = searchBar.value.toLowerCase(); - const filteredEpisodes = episodes.filter((episode) => - episode.name.toLowerCase().includes(query) || - (episode.summary && episode.summary.toLowerCase().includes(query)) - ); - displayEpisodes(filteredEpisodes); - }); - - // Event listener for dropdown selection - episodeSelector.addEventListener("change", () => { - const selectedId = episodeSelector.value; - if (selectedId === "all") { - displayEpisodes(episodes); - } else { - const selectedEpisode = episodes.find((ep) => ep.id == selectedId); - displayEpisodes(selectedEpisode ? [selectedEpisode] : []); - } - }); - - fetchEpisodes(); // Fetch data on page load -}); diff --git a/style.css b/style.css index b3e6083..fc499eb 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,26 @@ body { font-family: Arial, sans-serif; - background-color: #f5f5f5; - text-align: center; + background-color: #f9f9f9; + color: #333; margin: 0; padding: 0; + text-align: center; } h1 { margin-top: 20px; + color: #007bff; +} + +#searchBar, #showSelector, #episodeSelector { + width: 90%; + max-width: 600px; + padding: 10px; + margin: 10px auto; + border: 1px solid #ccc; + border-radius: 8px; + font-size: 16px; + display: block; } #root { @@ -19,45 +32,29 @@ h1 { } .episode-card { - background: white; + background-color: white; border: 1px solid #ddd; - border-radius: 8px; - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); + border-radius: 12px; + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); width: 300px; padding: 15px; + transition: transform 0.3s; } -.episode-card img { - width: 100%; - border-radius: 5px; +.episode-card:hover { + transform: scale(1.05); } -#searchBar, -#episodeSelector { - width: 30%; - padding: 10px; - margin: 10px 0; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 16px; -} -a { - display: block; - margin-top: 10px; - color: #0073e6; - text-decoration: none; +p { + font-size: 14px; } footer { margin-top: 20px; - position: fixed; - bottom: 0; - width: 100%; - background-color: silver; - color: black; + text-align: center; - padding: 10px 0; + padding: 10px; font-size: 14px; }