Skip to content

London | ITP-May-26 | Vito Moratti | Sprint 2 | Project TV Show Level-200 #84

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

Closed
vmoratti wants to merge 9 commits into from
Closed

London | ITP-May-26 | Vito Moratti | Sprint 2 | Project TV Show Level-200 #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
52dbf4d
Complete level 100
Aug 17, 2026
c09a0f5
Merge pull request #1 from gideondefar/feature/level-100
gideondefar Aug 17, 2026
174124f
add search box
vmoratti Aug 18, 2026
8512181
add search bar and dropdown box
vmoratti Aug 18, 2026
eca7e61
add some styling to search bar
vmoratti Aug 18, 2026
592bb3f
refactor and add search functionality
vmoratti Aug 18, 2026
dbd3983
add episode ccount functionality
vmoratti Aug 18, 2026
bf323e8
complete level-200
vmoratti Aug 18, 2026
0a52e88
adjust episode count to match requirements
vmoratti Aug 18, 2026
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
60 changes: 44 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,49 @@
<!DOCTYPE html>
<!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 | My Name (My GitHub username)</title>
<link href="style.css" rel="stylesheet" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TV Show Project | Gideon Defar (gideondefar)</title>
    <link href="style.css" rel="stylesheet" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  </head>

<body>
<div id="root">
  <body>

<div id="search">
<div>
<select id="episode-select">
<option value="">Select an episode</option>
</select>
<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />
<label for="episode-select">Choose an episode:</label>
<div id="search-count" >Search count</div>

<div id="search-count">

</div>

</div>
<div>

</div>



</div>
    <div id="root"></div>


    <footer class="footer">
      Episode data originally provided by
      <a href="https://www.tvmaze.com/" target="_blank">TVMaze.com</a>
    </footer>

<!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
<script src="episodes.js"></script>
    <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
    <script src="episodes.js"></script>

<!-- Loads YOUR javascript code -->
<script src="script.js"></script>
</body>
</html>
    <!-- Loads YOUR javascript code -->
    <script src="script.js"></script>
  </body>
</html>
80 changes: 72 additions & 8 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,76 @@
//You can edit ALL of the code here
function setup() {
const allEpisodes = getAllEpisodes();
makePageForEpisodes(allEpisodes);
//const allEpisodes = getAllEpisodes();

const root = document.getElementById("root");
const state = {
allEpisodes: getAllEpisodes(),
searchTerm: "",
};
function render() {
const filteredFilms = state.allEpisodes.filter((film) =>
film.title.includes(state.searchTerm),
);
const filmCards = filteredFilms.map(createFilmCard);
document.body.append(...filmCards);
}

function createEpisodeCard(ep) {
const seasonNumber = String(ep.season).padStart(2, "0");
const episodeNumber = String(ep.number).padStart(2, "0");

return `
<div class="card">
<h1 class="title">
S${seasonNumber}E${episodeNumber} - ${ep.name}
</h1>

${
ep.image?.medium
? `
<img
src="${ep.image.medium}"
alt="${ep.name} episode poster"
/>
`
: ""
}

<div class="content">
${ep.summary || "<p>No summary available.</p>"}
</div>
</div>
`;
}
function render() {
const filteredEpisodes = state.allEpisodes.filter(
(episode) =>
episode.name.toLowerCase().includes(state.searchTerm.toLowerCase()) ||
episode.summary.toLowerCase().includes(state.searchTerm.toLowerCase()),
);
const searchCount = document.getElementById("search-count");
searchCount.textContent = `Displaying ${filteredEpisodes.length}/${state.allEpisodes.length} episode(s)`;

root.innerHTML = filteredEpisodes.map(createEpisodeCard).join("");
}
function populateEpisodeSelect() {
const episodeSelect = document.getElementById("episode-select");

state.allEpisodes.forEach((episode) => {
const option = document.createElement("option");

const seasonNumber = String(episode.season).padStart(2, "0");
const episodeNumber = String(episode.number).padStart(2, "0");

option.value = episode.id;
option.textContent = `S${seasonNumber}E${episodeNumber} - ${episode.name}`;

function makePageForEpisodes(episodeList) {
const rootElem = document.getElementById("root");
rootElem.textContent = `Got ${episodeList.length} episode(s)`;
episodeSelect.appendChild(option);
});
}
populateEpisodeSelect();
render();
const searchInput = document.getElementById("site-search");

window.onload = setup;
searchInput.addEventListener("input", (event) => {
state.searchTerm = event.target.value;
render();
});
Loading