From 5199f968d73dc48bd9801b6488a2c1a62489262a Mon Sep 17 00:00:00 2001 From: zilinskyte Date: Fri, 12 Dec 2025 14:21:03 +0000 Subject: [PATCH 1/5] html and js functioning --- fetch/programmer-humour/index.html | 16 ++++++++++++++++ fetch/programmer-humour/script.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 fetch/programmer-humour/index.html create mode 100644 fetch/programmer-humour/script.js diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..ec9e0de2 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,16 @@ + + + + + + XKCD Latest Comic + + + +

Latest XKCD Comic

+
+

Loading...

+
+ + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..edfe173e --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,28 @@ +async function getLatestComic() { + const url = "https://xkcd.now.sh/?comic=latest"; + const container = document.getElementById("comic-container"); + + try { + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`HTTP error: ${response.status}`); + } + + const data = await response.json(); + console.log(data); + + container.innerHTML = ""; + + const img = document.createElement("img"); + img.src = data.img; + img.alt = data.title; + + container.appendChild(img); + } catch (error) { + console.error("Fetch error:", error); + container.innerHTML = `

Something went wrong loading the comic.

`; + } +} + +getLatestComic(); From df159df16cb89fbdb8ef9b46eab0e7cc6f624d47 Mon Sep 17 00:00:00 2001 From: zilinskyte Date: Fri, 12 Dec 2025 14:21:26 +0000 Subject: [PATCH 2/5] basic styling implemented --- fetch/programmer-humour/style.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 fetch/programmer-humour/style.css diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 00000000..cd8581a2 --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,23 @@ +body { + font-family: Arial, sans-serif; + background: #f4f4f4; + margin: 0; + padding: 20px; +} + +h1 { + text-align: center; +} + +#comic-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; +} + +#comic-container img { + max-width: 100%; + border: 2px solid #333; + border-radius: 8px; +} From 703824c32fc4d3e48660345400044bbb942e4918 Mon Sep 17 00:00:00 2001 From: zilinskyte Date: Fri, 12 Dec 2025 14:42:40 +0000 Subject: [PATCH 3/5] accessibility features added to help screen readers --- fetch/programmer-humour/index.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index ec9e0de2..09736e93 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -7,10 +7,12 @@ -

Latest XKCD Comic

-
-

Loading...

-
+
+

Latest XKCD Comic

+
+

Loading…

+
+
From 693adcf0a608d3bbca5b7e05fcdc8a66c05a46a3 Mon Sep 17 00:00:00 2001 From: zilinskyte Date: Fri, 12 Dec 2025 14:44:08 +0000 Subject: [PATCH 4/5] formatting consistency improved, max-width added to prevent img stretching --- fetch/programmer-humour/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index cd8581a2..ee1feeb2 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -3,6 +3,7 @@ body { background: #f4f4f4; margin: 0; padding: 20px; + line-height: 1.6; } h1 { @@ -13,7 +14,8 @@ h1 { display: flex; flex-direction: column; align-items: center; - margin-top: 20px; + max-width: 900px; + margin: 20px auto; } #comic-container img { From 47e4bf6f0865b95c2d6b6b9bf5cf7e0974495032 Mon Sep 17 00:00:00 2001 From: zilinskyte Date: Fri, 12 Dec 2025 14:46:01 +0000 Subject: [PATCH 5/5] replaced hardcoded URL with constant and improved error handling with defensive coding --- fetch/programmer-humour/script.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index edfe173e..a78dfe2d 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -1,9 +1,10 @@ +const API_URL = "https://xkcd.now.sh/?comic=latest"; + async function getLatestComic() { - const url = "https://xkcd.now.sh/?comic=latest"; const container = document.getElementById("comic-container"); try { - const response = await fetch(url); + const response = await fetch(API_URL); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); @@ -12,16 +13,20 @@ async function getLatestComic() { const data = await response.json(); console.log(data); + if (!data.img) { + throw new Error("API did not return an image"); + } + container.innerHTML = ""; const img = document.createElement("img"); img.src = data.img; - img.alt = data.title; + img.alt = data.alt || data.title || "XKCD comic"; container.appendChild(img); } catch (error) { console.error("Fetch error:", error); - container.innerHTML = `

Something went wrong loading the comic.

`; + container.innerHTML = `

Could not load the comic. Please try again later.

`; } }