CodeYourFuture · tomdu3 · Aug 12, 2026 · Aug 12, 2026 · Aug 12, 2026 · Aug 12, 2026
diff --git a/fetch/programmer-humour/assets/no_image.webp b/fetch/programmer-humour/assets/no_image.webp
diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Programmer Humour</title>
+    <link href="style.css" rel="stylesheet" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <h1>Programmer Humour</h1>
+    <main id="comic-container"></main>
+  </body>
+</html>
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js
@@ -0,0 +1,51 @@
+const fallbackImg = "./assets/no_image.webp";
+const endpointAPI = "https://xkcd.now.sh/?comic=latest";
+
+const container = document.getElementById("comic-container");
+
+const imgEl = document.createElement("img");
+imgEl.src = fallbackImg;
+imgEl.alt = "Loading comic...";
+
+imgEl.onerror = () => {
+  imgEl.src = fallbackImg;
+  imgEl.alt = "Failed to load comic";
+};
+
+if (container) {
+  container.appendChild(imgEl);
+}
+
+const fetchData = async () => {
+  try {
+    const response = await fetch(endpointAPI);
+    if (!response.ok) {
+      throw new Error(`Network response status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.log("Error fetching data:", error);
+    return null;
+  }
+};
+
+const renderComic = async () => {
+  if (!container) {
+    console.error("Comic container not found in DOM");
+    return;
+  }
+
+  const data = await fetchData();
+  console.log(data);
+  if (data && data.img) {
+    imgEl.src = data.img;
+    imgEl.alt = data.alt || data.title || "Programmer humour comic";
+  } else {
+    console.error("Image data not received");
+    imgEl.src = fallbackImg;
+    imgEl.alt = "No image available";
+  }
+};
+
+renderComic();
diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css
@@ -0,0 +1,4 @@
+img {
+  margin: 0 auto;
+  width: 500px;
+}