From a3f9cb7b9a38310f72f9e1134ac965b50fdada37 Mon Sep 17 00:00:00 2001 From: Maryam Janjua Date: Fri, 21 Aug 2026 20:40:29 +0100 Subject: [PATCH] fetch and display comic --- fetch/programmer-humour/index.html | 16 ++++++++++++++++ fetch/programmer-humour/script.js | 18 ++++++++++++++++++ fetch/programmer-humour/style.css | 8 ++++++++ 3 files changed, 42 insertions(+) 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..a53a33f09 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,16 @@ + + + + + + Programmer Humour + + + +
+

Programmer Humour

+
+
+ + + \ No newline at end of file diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..6205ca151 --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,18 @@ +async function getComic() { + try { + const response = await fetch("https://xkcd.now.sh/?comic=latest"); + if (!response.ok) { + throw new Error("Failed to fetch comic"); + } + const data = await response.json(); + console.log(data); + const comic = document.querySelector("#comic"); + const image = document.createElement("img"); + image.src = data.img; + image.alt = data.alt; + comic.appendChild(image); + } catch (error) { + console.error("Error:", error); + } +} +getComic(); \ No newline at end of file diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 000000000..fe52c604e --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,8 @@ +body { + font-family: Arial, sans-serif; + text-align: center; +} +img { + max-width: 100%; + height: auto; +} \ No newline at end of file