From 59b55118890b8e97d6b49969c226a308c5c70f1b Mon Sep 17 00:00:00 2001 From: MacDonald91 Date: Thu, 21 May 2026 14:40:28 +0100 Subject: [PATCH 1/2] Programmer humour clean rebuild --- 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 00000000..e69de29b 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 01a5111317c6bd7acb94fbe61960cf7530cd45b0 Mon Sep 17 00:00:00 2001 From: MacDonald91 Date: Thu, 21 May 2026 14:49:29 +0100 Subject: [PATCH 2/2] Add programmer humour solution (XSS safe) --- fetch/programmer-humour/index.html | 18 ++++++++++++ fetch/programmer-humour/script.js | 44 ++++++++++++++++++++++++++++++ fetch/programmer-humour/style.css | 11 ++++++++ 3 files changed, 73 insertions(+) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index e69de29b..2180920a 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + Programmer Humour + + + + +

Latest XKCD Comic

+ +
+

Loading comic...

+
+ + + + \ No newline at end of file diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index e69de29b..50f45101 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,44 @@ +function fetchComic() { + const container = document.getElementById("comic-container"); + + fetch("https://xkcd.now.sh/?comic=latest") + .then(response => { + if (!response.ok) { + throw new Error("Error fetching data"); + } + return response.json(); + }) + .then(data => { + console.log(data); + + // CLEAR OLD CONTENT + container.innerHTML = ""; + + // SAFE ELEMENTS (NO innerHTML) + const title = document.createElement("h2"); + title.textContent = data.title; + + const img = document.createElement("img"); + img.src = data.img; + img.alt = data.alt; + + const desc = document.createElement("p"); + desc.textContent = data.alt; + + container.appendChild(title); + container.appendChild(img); + container.appendChild(desc); + }) + .catch(error => { + container.innerHTML = ""; + + const errorMsg = document.createElement("p"); + errorMsg.textContent = "Error loading comic 😢"; + + container.appendChild(errorMsg); + + console.error(error); + }); +} + +window.addEventListener("load", fetchComic); \ No newline at end of file diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index e69de29b..6a031a65 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,11 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f4f4f4; +} + +img { + max-width: 100%; + height: auto; + margin-top: 20px; +} \ No newline at end of file