From a10c21062faa1195a75c32923422418464227470 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Wed, 29 Apr 2026 17:39:15 +0200 Subject: [PATCH 1/3] Add initial HTML, CSS, and JavaScript files for XKCD Comics feature --- fetch/programmer-humour/index.html | 19 +++++++++++++++++++ fetch/programmer-humour/script.js | 0 fetch/programmer-humour/style.css | 0 3 files changed, 19 insertions(+) create mode 100644 fetch/programmer-humour/index.html create mode 100644 fetch/programmer-humour/script.js create mode 100644 fetch/programmer-humour/style.css diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..4ae62e5e --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,19 @@ + + + + + + + XKCD Comics + + +
+

Latest XKCD Comic

+
+ +
+
+
+ + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..e69de29b diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 00000000..e69de29b From 9d360089323c7be03068d26137679ff630a6907f Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Mon, 4 May 2026 15:21:10 +0200 Subject: [PATCH 2/3] Implement XKCD Comics feature with HTML structure and JavaScript functionality --- fetch/programmer-humour/index.html | 3 ++- fetch/programmer-humour/script.js | 25 +++++++++++++++++++++++++ fetch/programmer-humour/style.css | 25 +++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 1 deletion(-) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 4ae62e5e..86da1819 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -12,7 +12,8 @@

Latest XKCD Comic

-
+ +
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index e69de29b..d44b8417 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,25 @@ +const comicImage = document.getElementById("comic-image"); +const comicAlt = document.getElementById("comic-alt"); + +function fetchComic() { + fetch("https://xkcd.now.sh/?comic=latest") + .then((response) => { + if (!response.ok) { + // Error handeling + throw new Error("Network fetch was not ok"); + } + return response.json(); + }) + .then((data) => { + console.log(data); + comicImage.src = data.img; + comicImage.alt = data.alt; + comicAlt.textContent = data.alt; + }) + .catch((error) => { + // Error handeling + console.error("Fetch error:", error); + }); +} + +fetchComic(); diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index e69de29b..343053d1 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,25 @@ +body { + background-color: antiquewhite; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +h1 { + text-align: center; +} + +img { + display: block; + height: auto; + border: solid 2px black; +} + +#comic-alt { + margin-top: 16px; + font-style: italic; + color: black; + text-align: center; + font-size: 1.4rem; +} From 771e1ab174ee64eec52821bc88300870c1464da4 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Mon, 4 May 2026 15:38:23 +0200 Subject: [PATCH 3/3] Add comments to HTML and enhance error handling in JavaScript for XKCD Comics feature --- fetch/programmer-humour/index.html | 2 ++ fetch/programmer-humour/script.js | 1 + 2 files changed, 3 insertions(+) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 86da1819..fdd9557c 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -12,7 +12,9 @@

Latest XKCD Comic

+ +
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index d44b8417..2ff35c33 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -19,6 +19,7 @@ function fetchComic() { .catch((error) => { // Error handeling console.error("Fetch error:", error); + alert("Failed to load comic. Check console for details."); // Extra error handeling popup on screen }); }