From 34cc58327da7ddcf17b77dc4b7c3ee381e475297 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Wed, 20 Aug 2025 18:47:13 +0100 Subject: [PATCH 1/3] - setup XKCD comic project with HTML, CSS, and JS - implement getLatestComic function to fetch latest comic from API - display comic image in DOM and log JSON data add error handling for failed API requests --- fetch/programmer-humour/index.html | 18 ++++++++++++++++++ fetch/programmer-humour/script.js | 29 +++++++++++++++++++++++++++++ fetch/programmer-humour/style.js | 13 +++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 fetch/programmer-humour/index.html create mode 100644 fetch/programmer-humour/script.js create mode 100644 fetch/programmer-humour/style.js diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..10ea25c7 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + + Programmer Humour + + + +
+

Latest XKCD Comic

+ +
+
+ + + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..eeef24ef --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,29 @@ +const btn = document.getElementById("getComicBtn"); +const container = document.getElementById("comicContainer"); + +async function getLatestComic() { + try { + const response = await fetch("https://xkcd.now.sh/?comic=latest"); + if (!response.ok) throw new Error("Network response was not ok"); + + const data = await response.json(); + console.log(data); // log received JSON + + // Clear previous comic + container.innerHTML = ""; + + // Create image element + const img = document.createElement("img"); + img.src = data.img; + img.alt = data.title; + + container.appendChild(img); + + } catch (error) { + console.error("Failed to fetch comic:", error); + container.textContent = "Failed to load comic. Please try again later."; + } +} + +// Event listener +btn.addEventListener("click", getLatestComic); diff --git a/fetch/programmer-humour/style.js b/fetch/programmer-humour/style.js new file mode 100644 index 00000000..57188b19 --- /dev/null +++ b/fetch/programmer-humour/style.js @@ -0,0 +1,13 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 2rem; +} + +#comicContainer img { + max-width: 100%; + height: auto; + margin-top: 1rem; + border: 2px solid #333; + border-radius: 5px; +} From b0fb0f87953b5a6dddb82f635793117bf99ecc03 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Wed, 20 Aug 2025 18:49:42 +0100 Subject: [PATCH 2/3] - setup XKCD comic project with HTML, CSS, and JS - implement getLatestComic function to fetch latest comic from API - display comic image in DOM and log JSON data - add error handling for failed API requests From 463757d1c47eeb5f511a15dc99f03e82eff563bd Mon Sep 17 00:00:00 2001 From: Samiuk Date: Wed, 20 Aug 2025 18:53:30 +0100 Subject: [PATCH 3/3] Fix : style.css --- fetch/programmer-humour/style.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/fetch/programmer-humour/style.js b/fetch/programmer-humour/style.js index 57188b19..ece17084 100644 --- a/fetch/programmer-humour/style.js +++ b/fetch/programmer-humour/style.js @@ -1,3 +1,6 @@ +// css/style.css +/* Style for XKCD Comic Fetcher */ + body { font-family: Arial, sans-serif; text-align: center; @@ -9,5 +12,5 @@ body { height: auto; margin-top: 1rem; border: 2px solid #333; - border-radius: 5px; + border-radius: 5px;; }