From 4957f2e0e1102c1ce31a801520d61019e36ceae1 Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Fri, 8 May 2026 17:39:19 +0100 Subject: [PATCH 1/3] Minimal solution --- fetch/programmer-humour/index.html | 13 +++++++++++++ fetch/programmer-humour/script.js | 26 ++++++++++++++++++++++++++ fetch/programmer-humour/styles.css | 0 3 files changed, 39 insertions(+) create mode 100644 fetch/programmer-humour/index.html create mode 100644 fetch/programmer-humour/script.js create mode 100644 fetch/programmer-humour/styles.css diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..a2270150 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,13 @@ + + + + + + Programming Humor - XKCD + + + + +

+ + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..34468500 --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,26 @@ +async function fetchXKCDComic() { + const url = "https://xkcd.now.sh/?comic=latest"; + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Response status: ${response.status}`); + } + const result = await response.json(); + return result; +} + +async function displayComic() { + const comicDisplay = document.querySelector("img"); + const errorDisplay = document.querySelector("p"); + + try { + const data = await fetchXKCDComic(); + console.log(data); + comicDisplay.src = data.img; + comicDisplay.alt = data.alt; + comicDisplay.title = data.title; + } catch (error) { + errorDisplay.textContent = error.message; + } +} + +document.onload = displayComic(); diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css new file mode 100644 index 00000000..e69de29b From ede96abdb2d8df3dabdb857b44e397269d177769 Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Fri, 8 May 2026 17:45:40 +0100 Subject: [PATCH 2/3] return JSON promise directly so that it throws in malformed JSON --- fetch/programmer-humour/script.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index 34468500..73e5730e 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -4,8 +4,7 @@ async function fetchXKCDComic() { if (!response.ok) { throw new Error(`Response status: ${response.status}`); } - const result = await response.json(); - return result; + return response.json(); } async function displayComic() { From d7945fdfe3ce247edb813c7abd31d5ea07d0619b Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Fri, 8 May 2026 17:47:28 +0100 Subject: [PATCH 3/3] document.onload is not reliable, so use eventListener --- fetch/programmer-humour/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index 73e5730e..d12bee6b 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -22,4 +22,4 @@ async function displayComic() { } } -document.onload = displayComic(); +document.addEventListener("DOMContentLoaded", displayComic);