CodeYourFuture · MalusiS · Aug 15, 2025 · Aug 15, 2025 · Aug 15, 2025 · Aug 16, 2025
diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Programmer Humour - XKCD Comics</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>😂 Programmer Humour</h1>
+
+  <div id="comic-container">
+    <p>Loading comic...</p>
+  </div>
+
+  <button id="new-comic-btn">Show me another comic</button>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js
@@ -0,0 +1,53 @@
+// Reusable function for fetching JSON with error handling
+async function fetchJson(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.json();
+}
+
+let latestNum = null; // cache latest comic number
+
+async function fetchRandomComic() {
+  const container = document.getElementById('comic-container');
+
+  try {
+    // Get latest comic number if not cached
+    if (!latestNum) {
+      const latestData = await fetchJson('https://xkcd.now.sh/?comic=latest');
+      latestNum = latestData.num;
+    }
+
+    // Pick a random comic number
+    const randomNum = Math.floor(Math.random() * latestNum) + 1;
+
+    // Fetch the random comic
+    const data = await fetchJson(`https://xkcd.now.sh/?comic=${randomNum}`);
+
+    // Render comic
+    container.innerHTML = '';
+
+    const title = document.createElement('div');
+    title.className = 'comic-title';
+    title.textContent = `#${data.num} – ${data.title}`;
+    container.appendChild(title);
+
+    const img = document.createElement('img');
+    img.src = data.img;
+    img.alt = data.alt;
+    img.title = data.alt;
+    container.appendChild(img);
+
+  } catch (error) {
+    console.error('Error fetching comic:', error);
+    container.innerHTML = `<p style="color:red;">Failed to load comic. Try again later.</p>`;
+  }
+}
+
+// Load first comic on page load
+fetchRandomComic();
+
+// Add button click handler
+document.getElementById('new-comic-btn')
+  .addEventListener('click', fetchRandomComic);
diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css
@@ -0,0 +1,43 @@
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: #f4f4f4;
+  margin: 0;
+  padding: 20px;
+}
+
+h1 {
+  color: #333;
+}
+
+#comic-container {
+  margin-top: 20px;
+}
+
+.comic-title {
+  font-weight: bold;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+}
+
+#comic-container img {
+  max-width: 100%;
+  height: auto;
+  border: 2px solid #ccc;
+  border-radius: 8px;
+}
+
+button {
+  margin-top: 20px;
+  padding: 10px 15px;
+  font-size: 1rem;
+  background-color: #0078d4;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #005a9e;
+}