Skip to content

LON | Amir Montazeri | TV-Show | Level 400 | Partner: Amirhossein Aminian #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AmirhosseinAminian merged 4 commits into from
Mar 19, 2025
Merged

LON | Amir Montazeri | TV-Show | Level 400 | Partner: Amirhossein Aminian #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3945278
TV-show added to h1
Amirmontazerii Mar 19, 2025
cfc81f5
implementation has been added, including the logic for fetching and d…
Amirmontazerii Mar 19, 2025
e93d808
style changed
Amirmontazerii Mar 19, 2025
9fda828
Merge branch 'main' into level-400
AmirhosseinAminian Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TV Show Project | Amirhossein Aminian</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>


<body>
<header>
Expand Down
89 changes: 0 additions & 89 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = "<p class='loading'>Loading episodes...</p>"; // 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 = `<p class='error'>Error loading episodes. Please try again later.</p>`;
console.error("Fetch Error:", error);
}
}

// Function to display episodes
function displayEpisodes(episodeList) {
root.innerHTML = ""; // Clear previous content
if (episodeList.length === 0) {
root.innerHTML = "<p>No episodes found.</p>";
return;
}

episodeList.forEach((episode) => {
const episodeCard = document.createElement("div");
episodeCard.className = "episode-card";
episodeCard.innerHTML = `
<h3>${formatEpisodeTitle(episode)}</h3>
<img src="${episode.image ? episode.image.medium : 'https://via.placeholder.com/250'}" alt="${episode.name}">
<p>${episode.summary || "No summary available."}</p>
<a href="${episode.url}" target="_blank">More info</a>
`;
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 = '<option value="all">Show All Episodes</option>';
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
});
53 changes: 25 additions & 28 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}

Expand Down