CodeYourFuture · edinakurdi · Aug 14, 2026 · Aug 14, 2026 · Aug 14, 2026 · Aug 14, 2026
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="style.css">
+    <script src="script.js" defer></script>
+</head>
+
+<body>
+    <h1>Programmer humour</h1>
+    <img src="" alt="">
+
+</body>
+
+</html>
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js
@@ -0,0 +1,35 @@
+const endpointAPI = "https://xkcd.now.sh/?comic=latest";
+async function fetchData(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error("Could not fetch data", error);
+  }
+}
+
+async function loadComic() {
+  try {
+    const data = await fetchData(endpointAPI);
+    if (!data) {
+      throw new Error("No data received from the API.");
+    }
+    const imgEl = document.querySelector("img");
+    imgEl.src = data.img;
+    imgEl.title = data.title;
+    imgEl.alt = data.alt;
+  } catch (error) {
+    console.error("Error loading comic:", error);
+    document.querySelector("h1").textContent =
+      "Image failed loading. Please try again later";
+  }
+}
+
+loadComic();
diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css
@@ -0,0 +1,15 @@
+body {
+    background-color: #e0f5f5;
+    font-family: sans-serif;
+    text-align: center;
+    padding: 2rem;
+}
+
+h1 {
+    color: #1a6b6b;
+    font-size: 3rem;
+}
+
+/* img {
+    margin: 0 auto;
+} */