diff --git a/fetch/programmer-humour/assets/no_image.webp b/fetch/programmer-humour/assets/no_image.webp new file mode 100644 index 000000000..122741b60 Binary files /dev/null and b/fetch/programmer-humour/assets/no_image.webp differ diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 000000000..ecf99c9a8 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,17 @@ + + + + + + Programmer Humour + + + +

Programmer Humour

+
+ Loading comic... +
+

+ + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..1979d8690 --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,18 @@ +function getLatestComic() { + fetch("https://xkcd.now.sh/?comic=latest") + .then(function (response) { + if (!response.ok) throw new Error("Network response was not ok"); + return response.json(); + }) + .then(function (data) { + console.log(data); + document.getElementById("comic-img").src = data.img; + document.getElementById("comic-img").alt = data.title; + }) + .catch(function (error) { + document.getElementById("error").textContent = + "Failed to load comic: " + error.message; + }); +} + +getLatestComic(); diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 000000000..a59003193 --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,15 @@ +body { + font-family: sans-serif; + text-align: center; + padding: 2rem; +} + +#comic img { + max-width: 600px; + width: 100%; + margin-top: 1rem; +} + +#error { + color: red; +}