CodeYourFuture · Halimatou-saddiyaa · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 20, 2025
diff --git a/fetch/index.html b/fetch/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>XKCD Latest Comic</title>
+   <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+<body>
+    <h1>Latest XKCD Comic</h1>
+  <div id="image-container"></div>
+  <script src="script.js"></script>
+  </body>
+</html>
diff --git a/fetch/script.js b/fetch/script.js
@@ -0,0 +1,35 @@
+async function fetchLatestXKCD() {
+    const apiEndpoint = 'https://xkcd.now.sh/?comic=latest';
+
+    try {
+      const response = await fetch(apiEndpoint);
+      if (!response.ok) {
+        throw new Error(`Fetching error! Status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      console.log('Received data:', data);
+
+      if (data.img) {
+        const imgElement = document.createElement('img');
+        imgElement.src = data.img;
+        imgElement.alt = data.alt || 'XKCD Comic';
+
+        const container = document.getElementById('image-container');
+        container.innerHTML = ''; 
+        container.appendChild(imgElement);
+      } else {
+        console.warn('No "img" property found in the data.');
+      }
+
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      const errorMsg = document.createElement('div');
+      errorMsg.className = 'error';
+      errorMsg.textContent = `Error fetching data: ${error.message}`;
+      document.body.appendChild(errorMsg);
+    }
+  }
+
+  fetchLatestXKCD();
+
diff --git a/fetch/style.css b/fetch/style.css
@@ -0,0 +1,41 @@
+body {
+      font-family: Arial, sans-serif;
+      background-color: #f0f2f5;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      margin: 0;
+      padding: 20px;
+    }
+
+    h1 {
+      color: #333;
+    }
+
+    #image-container {
+      margin-top: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      justify-content: center;
+    }
+
+    #image-container img {
+      max-width: 300px;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    #image-container img:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+    }
+
+    .error {
+      color: red;
+      font-weight: bold;
+      margin-top: 20px;
+    }