Add: fetch latest XKCD comic with error handling

MacDonald91 · MacDonald91 · commit fe7124b3b161 · 2026-04-19T21:55:09.000+01:00
diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Programmer Humour</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <h1>Latest XKCD Comic</h1>
+
+  <div id="comic-container">
+    <p id="loading">Loading comic...</p>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js
@@ -0,0 +1,26 @@
+function fetchComic() {
+  const container = document.getElementById("comic-container");
+
+  fetch("https://xkcd.now.sh/?comic=latest")
+    .then(response => {
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.json();
+    })
+    .then(data => {
+      console.log(data); // requirement
+
+      container.innerHTML = `
+        <h2>${data.title}</h2>
+        <img src="${data.img}" alt="${data.alt}" />
+        <p>${data.alt}</p>
+      `;
+    })
+    .catch(error => {
+      container.innerHTML = `<p>Error loading comic 😢</p>`;
+      console.error(error);
+    });
+}
+
+window.addEventListener("load", fetchComic);
diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css
@@ -0,0 +1,11 @@
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: #f4f4f4;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 20px;
+}
