From abb33dfa3aeff60440ac80b46f6b998461175133 Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 15:57:48 +0100 Subject: [PATCH 1/8] create html, script and css files --- fetch/programmer-humour/index.html | 0 fetch/programmer-humour/script.js | 0 fetch/programmer-humour/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) 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 000000000..e69de29bb diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..e69de29bb diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 000000000..e69de29bb From 4ccc71eaa55fd5b87d2efddbf01d9617edbe6b0a Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 16:00:58 +0100 Subject: [PATCH 2/8] complete html page and connect to script and css --- fetch/programmer-humour/index.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index e69de29bb..ec135818f 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + + + + + Programmer humour + + + +

Progammer humour image below

+ programmer humour image + + + + \ No newline at end of file From 00c17d277dff8bfc15889c1e6ce47eff9959177a Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 16:10:41 +0100 Subject: [PATCH 3/8] complete css for web page --- fetch/programmer-humour/index.html | 5 +++-- fetch/programmer-humour/style.css | 32 ++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index ec135818f..67379e91a 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -11,8 +11,9 @@

Progammer humour image below

- programmer humour image - +
+ programmer humour image +
\ No newline at end of file diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index e69de29bb..4ec29b0ef 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,32 @@ +/* CSS Reset */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + margin: 0; + padding: 0; +} + +html { + font-size: 100%; + line-height: 1.5; +} + +img { + display: block; + width: 100%; + height: auto; +} + +body { + min-height: 100vh; + display: grid; + place-items: center; + font-family: Arial, sans-serif; + background: #f4f4f4; + color: #222; +} From 0fe2d184130758637d52eea78b87acbd3d80ed5e Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 16:47:18 +0100 Subject: [PATCH 4/8] update script.js to fetch image --- fetch/programmer-humour/index.html | 2 +- fetch/programmer-humour/script.js | 67 ++++++++++++++++++++++++++++++ fetch/programmer-humour/style.css | 14 +++++++ 3 files changed, 82 insertions(+), 1 deletion(-) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 67379e91a..543ba90bb 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -10,8 +10,8 @@ -

Progammer humour image below

+

Progammer humour image below

programmer humour image
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index e69de29bb..12fc343e1 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,67 @@ +const imageElement = document.querySelector("img"); +const IMG_URL = `https://xkcd.now.sh/?comic=latest`; + +let cachedImage = null; +let imageCache = null; +let imagePromise = null; + +const state = { + imgData: {}, +}; + +async function fetchImageData() { + if (cachedImage) return cachedImage; + if (!imagePromise) { + imagePromise = fetch(IMG_URL) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + imageCache = data; + return imageCache; + }); + } + return imagePromise; +} + +async function setup() { + try { + const fetchedImgData = await fetchImageData(); + state.imgData = fetchedImgData; + renderImage(); + const loadingMessage = document.querySelector(".app-message"); + if (loadingMessage) { + loadingMessage.remove(); + } + } catch (error) { + console.error("Failed to load image:", error); + showMessage("Sorry, we could not load the image right now."); + } +} + +function renderImage() { + console.log(state.imgData); + if (imageElement && state.imgData.img) { + imageElement.src = state.imgData.img; + imageElement.alt = state.imgData.title || "Comic image"; + } +} + +function showMessage(message, duration = 3000) { + const existingMessage = document.querySelector(".app-message"); + if (existingMessage) existingMessage.remove(); + + const messageBox = document.createElement("div"); + messageBox.className = "app-message"; + messageBox.textContent = message; + document.body.appendChild(messageBox); + + setTimeout(() => { + messageBox.remove(); + }, duration); +} + +window.addEventListener("DOMContentLoaded", setup); diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index 4ec29b0ef..e0a22cdd0 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -30,3 +30,17 @@ body { background: #f4f4f4; color: #222; } + +/* shows loading message */ +.app-message { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #222; + color: white; + padding: 0.8rem 1rem; + border-radius: 6px; + z-index: 1000; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} From e985990e10d98060494967d5de3f7d63e6ae7284 Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 16:54:35 +0100 Subject: [PATCH 5/8] add media query to h1 in css --- fetch/programmer-humour/style.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index e0a22cdd0..824f62ab9 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -31,6 +31,17 @@ body { color: #222; } +main { + width: 90%; + max-width: 600px; +} + +h1 { + text-align: center; + font-size: 1em; + margin: 1rem 0; +} + /* shows loading message */ .app-message { position: fixed; @@ -44,3 +55,9 @@ body { z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } + +@media (min-width: 600px) { + h1 { + font-size: 1.8em; + } +} From 33808e7e0293f3643379741b9904b4f43379a948 Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 16:56:38 +0100 Subject: [PATCH 6/8] remove console.logs in script.js --- fetch/programmer-humour/script.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index 12fc343e1..16c0e9aa9 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -37,13 +37,11 @@ async function setup() { loadingMessage.remove(); } } catch (error) { - console.error("Failed to load image:", error); showMessage("Sorry, we could not load the image right now."); } } function renderImage() { - console.log(state.imgData); if (imageElement && state.imgData.img) { imageElement.src = state.imgData.img; imageElement.alt = state.imgData.title || "Comic image"; From b9b1896abe6583357d776a168a574ea3adf24031 Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 17:04:43 +0100 Subject: [PATCH 7/8] remove redudant code in script.js --- 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 16c0e9aa9..a8b048ecd 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -1,7 +1,6 @@ const imageElement = document.querySelector("img"); const IMG_URL = `https://xkcd.now.sh/?comic=latest`; -let cachedImage = null; let imageCache = null; let imagePromise = null; @@ -10,7 +9,7 @@ const state = { }; async function fetchImageData() { - if (cachedImage) return cachedImage; + if (imageCache) return imageCache; if (!imagePromise) { imagePromise = fetch(IMG_URL) .then((response) => { From 1090f1569975dde77329a8c631c07aa03b18adaf Mon Sep 17 00:00:00 2001 From: Martin Mwaka Date: Wed, 12 Aug 2026 17:18:52 +0100 Subject: [PATCH 8/8] add placeholder loading... image in script.js --- fetch/programmer-humour/index.html | 2 +- fetch/programmer-humour/script.js | 6 +++--- fetch/programmer-humour/style.css | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 543ba90bb..3794041da 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -12,7 +12,7 @@

Progammer humour image below

- programmer humour image + Loading XKCD comic
diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index a8b048ecd..16a90098b 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -1,5 +1,5 @@ const imageElement = document.querySelector("img"); -const IMG_URL = `https://xkcd.now.sh/?comic=latest`; +const endpoint = `https://xkcd.now.sh/?comic=latest`; let imageCache = null; let imagePromise = null; @@ -11,7 +11,7 @@ const state = { async function fetchImageData() { if (imageCache) return imageCache; if (!imagePromise) { - imagePromise = fetch(IMG_URL) + imagePromise = fetch(endpoint) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -43,7 +43,7 @@ async function setup() { function renderImage() { if (imageElement && state.imgData.img) { imageElement.src = state.imgData.img; - imageElement.alt = state.imgData.title || "Comic image"; + imageElement.alt = state.imgData.alt || "Comic image"; } } diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index 824f62ab9..c966dfd97 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -48,7 +48,7 @@ h1 { top: 50%; left: 50%; transform: translate(-50%, -50%); - background: #222; + background: #b53a3a; color: white; padding: 0.8rem 1rem; border-radius: 6px;