CodeYourFuture · AbdihamidAli · May 6, 2024
diff --git a/programmer-humour/index.html b/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>Abdi Comic Web</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div id="comic-container">
+        <!-- Image will be rendered here -->
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/programmer-humour/script.js b/programmer-humour/script.js
@@ -0,0 +1,31 @@
+// Function to fetch latest xkcd comic
+async function fetchComicData() {
+    try {
+        const response = await fetch('https://xkcd.now.sh/?comic=latest');
+        if (!response.ok) {
+            throw new Error('Failed to fetch comic');
+        }
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error(error);
+        return null;
+    }
+}
+
+// Function to render comic image to DOM
+async function displayComic() {
+    const container = document.getElementById('comic-container');
+    const comicData = await fetchComicData();
+    if (comicData && comicData.img) {
+        const img = document.createElement('img');
+        img.src = comicData.img;
+        img.alt = comicData.alt;
+        container.appendChild(img);
+    } else {
+        container.textContent = 'Failed to load comic.';
+    }
+}
+
+// Call displayComic function when the page loads
+displayComic();
diff --git a/programmer-humour/styles.css b/programmer-humour/styles.css
@@ -0,0 +1,15 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f2f2f2;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}