CodeYourFuture · IakubDubachev · Dec 26, 2024 · Dec 29, 2024 · Dec 29, 2024
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <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>
+    <title>TV Show Project | Iakub Dubachev (IakubDubachev)</title>
     <link href="style.css" rel="stylesheet" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
   </head>

diff --git a/script.js b/script.js
@@ -1,12 +1,60 @@
-//You can edit ALL of the code here
 function setup() {
   const allEpisodes = getAllEpisodes();
   makePageForEpisodes(allEpisodes);
 }
 
+// Function to render all episodes on the page
 function makePageForEpisodes(episodeList) {
   const rootElem = document.getElementById("root");
-  rootElem.textContent = `Got ${episodeList.length} episode(s)`;
+  rootElem.innerHTML = ''; // Clear any existing content
+
+  const episodeCount = document.createElement('p');
+  episodeCount.textContent = `Got ${episodeList.length} episode(s)`;
+  rootElem.appendChild(episodeCount);
+
+  // Create a container for episodes
+  const episodeContainer = document.createElement('div');
+  episodeContainer.id = 'episode-container';
+  rootElem.appendChild(episodeContainer);
+
+  episodeList.forEach((episode) => {
+    const episodeCard = document.createElement('div');
+    episodeCard.className = 'episode-card';
+
+    // Episode Title with Episode Code
+    const episodeTitle = document.createElement('h3');
+    episodeTitle.textContent = `${formatEpisodeCode(episode.season, episode.number)} - ${episode.name}`;
+
+    // Episode Image
+    const episodeImage = document.createElement('img');
+    episodeImage.src = episode.image?.medium || 'placeholder.jpg';
+    episodeImage.alt = episode.name;
+
+    // Episode Summary
+    const episodeSummary = document.createElement('p');
+    episodeSummary.innerHTML = episode.summary || 'No summary available.';
+
+    // Link to TVMaze episode page
+    const episodeLink = document.createElement('a');
+    episodeLink.href = episode.url;
+    episodeLink.target = '_blank';
+    episodeLink.textContent = 'View on TVMaze';
+
+    // Append elements to the episode card
+    episodeCard.appendChild(episodeTitle);
+    episodeCard.appendChild(episodeImage);
+    episodeCard.appendChild(episodeSummary);
+    episodeCard.appendChild(episodeLink);
+
+    // Add episode card to container
+    episodeContainer.appendChild(episodeCard);
+  });
+}
+
+// Format the episode code (e.g., S02E07)
+function formatEpisodeCode(season, number) {
+  return `S${String(season).padStart(2, '0')}E${String(number).padStart(2, '0')}`;
 }
 
+// Run the setup when the page loads
 window.onload = setup;
diff --git a/style.css b/style.css
@@ -1,3 +1,44 @@
-#root {
-  color: red;
+#episode-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 1rem;
 }
+
+.episode-card {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 1rem;
+  max-width: 300px;
+  text-align: center;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.episode-card img {
+  max-width: 100%;
+  border-radius: 5px;
+}
+
+.episode-card h3 {
+  font-size: 1rem;
+  margin: 0.5rem 0;
+}
+
+.episode-card p {
+  font-size: 0.9rem;
+  margin: 0.5rem 0;
+}
+
+.episode-card a {
+  text-decoration: none;
+  color: #0077cc;
+  font-weight: bold;
+}
+
+p {
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+