CodeYourFuture · MacDonald91 · May 21, 2026
diff --git a/debugging/code-reading/readme.md → challenges/code-reading/readme.md b/debugging/code-reading/readme.md → challenges/code-reading/readme.md
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,44 @@
+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);
+
+      // CLEAR OLD CONTENT
+      container.innerHTML = "";
+
+      // SAFE ELEMENT CREATION (FIXES XSS)
+      const title = document.createElement("h2");
+      title.textContent = data.title;
+
+      const img = document.createElement("img");
+      img.src = data.img;
+      img.alt = data.alt;
+
+      const desc = document.createElement("p");
+      desc.textContent = data.alt;
+
+      container.appendChild(title);
+      container.appendChild(img);
+      container.appendChild(desc);
+    })
+    .catch(error => {
+      container.innerHTML = "";
+
+      const errorMsg = document.createElement("p");
+      errorMsg.textContent = "Error loading comic 😢";
+
+      container.appendChild(errorMsg);
+
+      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;
+}