CodeYourFuture · HoussamLh · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025
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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Programmer Humour</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main>
+    <h1>Latest XKCD Comic</h1>
+    <button id="getComicBtn">Get Latest Comic</button>
+    <div id="comicContainer"></div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js
@@ -0,0 +1,29 @@
+const btn = document.getElementById("getComicBtn");
+const container = document.getElementById("comicContainer");
+
+async function getLatestComic() {
+  try {
+    const response = await fetch("https://xkcd.now.sh/?comic=latest");
+    if (!response.ok) throw new Error("Network response was not ok");
+
+    const data = await response.json();
+    console.log(data); // log received JSON
+
+    // Clear previous comic
+    container.innerHTML = "";
+
+    // Create image element
+    const img = document.createElement("img");
+    img.src = data.img;
+    img.alt = data.title;
+
+    container.appendChild(img);
+
+  } catch (error) {
+    console.error("Failed to fetch comic:", error);
+    container.textContent = "Failed to load comic. Please try again later.";
+  }
+}
+
+// Event listener
+btn.addEventListener("click", getLatestComic);
diff --git a/fetch/programmer-humour/style.js b/fetch/programmer-humour/style.js
@@ -0,0 +1,16 @@
+// css/style.css
+/* Style for XKCD Comic Fetcher */
+
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  padding: 2rem;
+}
+
+#comicContainer img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 1rem;
+  border: 2px solid #333;
+  border-radius: 5px;;
+}