CodeYourFuture · Yonatanteklemariam · Aug 7, 2026 · Aug 7, 2026 · Aug 7, 2026 · Aug 7, 2026
diff --git a/index.html b/index.html
@@ -1,21 +1,34 @@
 <!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>
 
-  <body>
-    <div id="root">
-    </div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TV Show Project | Russom Gebremeskel russom-g</title>
+  <link href="style.css" rel="stylesheet" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+</head>
 
-    <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
-    <script src="episodes.js"></script>
+<body>
+  <label>
+    Search <input type="search" id="q" name="q" placeholder="Search term" /> 🔍
+  </label>
+  <p id="search-count"></p>
+  <template id="tv-show-card">
+    <article class="card">
+      <h3>Tv show title</h3>
+      <img alt="Episode image">
+      <p>Episode summary</p>
+      <a></a>
+    </article>
+  </template>
+  <div id="root"></div>
+  <section id="film-box"></section>
 
-    <!-- Loads YOUR javascript code -->
-    <script src="script.js"></script>
-  </body>
-</html>
+  <script src="episodes.js"></script>
+
+  <!-- Loads YOUR javascript code -->
+  <script src="script.js" defer></script>
+</body>
+
+</html>
diff --git a/sample.js b/sample.js
@@ -0,0 +1,39 @@
+
+
+
+function setup() {
+  const tvShows = getAllEpisodes();
+
+  const tvShowCards = tvShows.map(createTvShowCard);
+
+  root.append(...tvShowCards);
+}
+
+function createTvShowCard(tvShow) {
+  const tvShowCard = document
+    .getElementById("tv-show-card")
+    .content
+    .cloneNode(true);
+
+  const title = tvShowCard.querySelector("h3");
+  title.textContent = `${tvShow.name} - S${String(tvShow.season).padStart(
+    2,
+    “0”,
+  )}E${String(tvShow.number).padStart(2, "0")}`;
+
+  const image = tvShowCard.querySelector(“img”);
+  image.src = tvShow.image.medium;
+  image.alt = tvShow.name;
+
+  const summary = tvShowCard.querySelector(“p”);
+  summary.innerHTML = tvShow.summary;
+
+  const link = tvShowCard.querySelector(“a”);
+  link.href = tvShow.url;
+  link.textContent = “Source”;
+  link.target = “_blank”;
+
+  return tvShowCard;
+}
+
+window.onload = setup;
diff --git a/script.js b/script.js
@@ -1,12 +1,82 @@
-//You can edit ALL of the code here
-function setup() {
-  const allEpisodes = getAllEpisodes();
-  makePageForEpisodes(allEpisodes);
+const root = document.getElementById("root");
+const searchInput = document.getElementById("q");
+const episodeArr = getAllEpisodes();
+const state = {
+  episodes: episodeArr,
+  searchTerm: "",
+};
+
+function createTvShowCard(tvShow) {
+  const tvShowCard = document
+    .getElementById("tv-show-card")
+    .content.cloneNode(true);
+
+  const title = tvShowCard.querySelector("h3");
+  title.textContent = `${tvShow.name} - S${String(tvShow.season).padStart(
+    2,
+    "0",
+  )}E${String(tvShow.number).padStart(2, "0")}`;
+
+  const image = tvShowCard.querySelector("img");
+  image.src = tvShow.image.medium;
+  image.alt = tvShow.name;
+
+  const summary = tvShowCard.querySelector("p");
+  summary.innerHTML = tvShow.summary;
+
+  const link = tvShowCard.querySelector("a");
+  link.href = tvShow.url;
+  link.textContent = "Source";
+  link.target = "_blank";
+
+  return tvShowCard;
+}
+
+function updateCount(list) {
+  const countElement = document.getElementById("search-count");
+
+  // If search box is empty → show total episodes
+  if (state.searchTerm.trim() === "") {
+    countElement.textContent = `Total episodes: ${state.episodes.length}`;
+    return;
+  }
+
+  // If typing → show matching episodes
+  countElement.textContent = `Matching episodes: ${list.length}`;
 }
 
-function makePageForEpisodes(episodeList) {
-  const rootElem = document.getElementById("root");
-  rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+function renderEpisodes(list) {
+  root.innerHTML = "";
+  const tvShowCards = list.map(createTvShowCard);
+  root.append(...tvShowCards);
+  updateCount(list);
 }
 
-window.onload = setup;
+function handleSearch() {
+  const term = searchInput.value.toLowerCase();
+  state.searchTerm = term;
+
+  if (term === "") {
+    renderEpisodes(state.episodes);
+    return;
+  }
+
+  const filteredEpisodes = state.episodes.filter(function (tvshow) {
+    const name = tvshow.name.toLowerCase();
+
+    let summary = "";
+    if (tvshow.summary) {
+      summary = tvshow.summary.toLowerCase();
+    }
+
+    return name.indexOf(state.searchTerm.toLowerCase()) !== -1;
+  });
+
+  renderEpisodes(filteredEpisodes);
+}
+
+renderEpisodes(state.episodes);
+
+searchInput.addEventListener("keyup", function () {
+  handleSearch();
+});
diff --git a/style.css b/style.css
@@ -1,3 +1,32 @@
 #root {
-  color: red;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 20px;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+h3 {
+  font-size: 18px;
+  border: 2px solid black;
+  padding: 10px;
+  text-align: center;
+}
+
+p {
+  font-size: 14px;
+}
+
+/* Add basic card styling so the shape is not distorted */
+.card {
+  width: 250px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
 }