diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..2ba986f
--- /dev/null
+++ 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}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 9a400d1..357eb51 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
- TV Show Project | My Name (My GitHub username)
+ TV Show Project | Iakub Dubachev (IakubDubachev)
diff --git a/script.js b/script.js
index 87a7de8..adc92c6 100644
--- 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
index 77cb8d4..d8422d5 100644
--- 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;
+}
+