diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
index 9a400d1..e39bf02 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,31 @@
-
+
- TV Show Project | My Name (My GitHub username)
+ TV Show Project | Russom Gebremeskel russom-g
-
-
-
-
-
-
+
+
+
+
+
+ Tv show title
+ ![Episode image]()
+ Episode summary
+
+
+
+
+
-
+
diff --git a/sample.js b/sample.js
new file mode 100644
index 0000000..fcac9ba
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/script.js b/script.js
index 87a7de8..e629dc0 100644
--- a/script.js
+++ b/script.js
@@ -1,12 +1,105 @@
-//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 = "https://api.tvmaze.com/shows/82/episodes";
+const state = {
+ episodes: [],
+ searchTerm: "",
+};
+
+const fetchEpisode = async() => {
+ const response = await fetch(episodeArr);
+
+if (!response.ok) {
+ throw new Error(`HTTP error: ${response.status}`);
+}
+
+ return await response.json();
+};
+
+const status = document.getElementById("status");
+status.textContent = "Loading episodes...";
+
+fetchEpisode().then((episodes) => {
+ state.episodes = episodes;
+ status.textContent = "";
+ state.episodes = episodes;
+ renderEpisodes(episodes);
+})
+.catch((error) => {
+ document.getElementById("status").textContent =
+ "Sorry, we couldn't load the episodes.";
+});
+
+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 renderEpisodes(list) {
+ root.innerHTML = "";
+ const tvShowCards = list.map(createTvShowCard);
+ root.append(...tvShowCards);
+ updateCount(list);
}
-function makePageForEpisodes(episodeList) {
- const rootElem = document.getElementById("root");
- rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+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);
}
-window.onload = setup;
+searchInput.addEventListener("keyup", function () {
+ handleSearch();
+});
diff --git a/style.css b/style.css
index 77cb8d4..dfbdfee 100644
--- 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;
}