Fetch Image using fetch API

avatarit · avatarit · commit 7449eb50e5b3 · 2025-08-12T01:30:55.000+01:00
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>
+    <header>
+        <h1>Who knew programmers could be funny?</h1>
+    </header>
+    <div id="container" class="content">
+
+        </div>
+</body>
+</html>
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js
@@ -0,0 +1,25 @@
+const container = document.getElementById('container');
+const img = document.createElement('img');
+
+container.appendChild(img);
+img.style.width = '100%';
+img.style.height = 'auto';
+
+function fetchImage() {
+    fetch('https://xkcd.vercel.app/?comic=latest') // or the ridvanaltun endpoint
+      .then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status} ${r.statusText}`);
+        return r.json();
+      })
+      .then(data => {
+        console.log('XKCD data:', data);           // logs the JSON
+        img.src = data.img || data.imageUrl || data.image;
+        img.alt = data.alt || data.title || 'XKCD comic';
+      })
+      .catch(err => {
+        console.error('Error fetching image:', err);
+        container.textContent = 'Could not load the comic.';
+      });
+  }
+
+fetchImage();
diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css
@@ -0,0 +1,28 @@
+body {
+    font-family: sans-serif;
+    margin: 0;
+    padding: 1rem;
+    background: #fafafa;
+    color: #333;
+  }
+  
+  header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+  }
+  
+  .content {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    border: 1px solid #ddd;
+    background: white;
+    padding: 0.5rem;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+  }
+  
