From 0ae9670bb5643840b2f21b1b2eefc2698d2683ff Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 21:31:26 +0100 Subject: [PATCH 1/8] initial html --- fetch/programmer-humour/index.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 fetch/programmer-humour/index.html diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 000000000..3f91139dc --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,17 @@ + + + + + + + Programmer humour + + + + + +

Programmer humour

+ + + + \ No newline at end of file From dc9eeb0e3ef7268c19b7870a7ef5f1b1866879e3 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 21:32:04 +0100 Subject: [PATCH 2/8] create JS file --- fetch/programmer-humour/script.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 fetch/programmer-humour/script.js diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..e69de29bb From 7dd5728845fd02b3f303ecf6c336e9eb39230046 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 21:36:03 +0100 Subject: [PATCH 3/8] create CSS file --- fetch/programmer-humour/style.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 fetch/programmer-humour/style.css diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 000000000..e69de29bb From 731c8bae702d0948121180dc75d140c11a03bee9 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 21:37:14 +0100 Subject: [PATCH 4/8] add img tag in html --- fetch/programmer-humour/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 3f91139dc..d34d101ac 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -11,6 +11,7 @@

Programmer humour

+ From 04966d8a550a69bb41b37bed62d4dc17afc4aaa7 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 21:51:40 +0100 Subject: [PATCH 5/8] write API call to https://xkcd.now.sh/?comic=latest --- fetch/programmer-humour/script.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index e69de29bb..a4aded88a 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,15 @@ +const endpointAPI = "https://xkcd.now.sh/?comic=latest"; +async function fetchData(endpointAPI) { + try { + const response = await fetch(endpointAPI); + if (!response.ok) { + throw new Error(`Error! Status: ${response.status}`); + } + + const data = await response.json(); + + return data; + } catch (error) { + console.error("Could not fetch data", error); + } +} From 626309f3f05abf8a1bd99b88df8a766401ab6b60 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 22:53:40 +0100 Subject: [PATCH 6/8] implement loadComic() async function --- fetch/programmer-humour/script.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index a4aded88a..d8245f408 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -13,3 +13,22 @@ async function fetchData(endpointAPI) { console.error("Could not fetch data", error); } } + +async function loadComic() { + try { + const data = await fetchData(endpointAPI); + if (!data) { + throw new Error("No data received from the API."); + } + const imgEl = document.querySelector("img"); + imgEl.src = data.img; + imgEl.title = data.title; + imgEl.alt = data.alt; + } catch (error) { + console.error("Error loading comic:", error); + document.querySelector("h1").textContent = + "Image failed loading. Please try again later"; + } +} + +loadComic(); From ec7afc27e9088698ed5ea7a6f251bd5878135f62 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 22:54:22 +0100 Subject: [PATCH 7/8] log the data to the console --- fetch/programmer-humour/script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index d8245f408..26e07be66 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -8,6 +8,7 @@ async function fetchData(endpointAPI) { const data = await response.json(); + console.log(data); return data; } catch (error) { console.error("Could not fetch data", error); From b7e7c6ff201c2e6b5cac761567f76dfd52962ad6 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Fri, 14 Aug 2026 22:54:52 +0100 Subject: [PATCH 8/8] add basic css formatting --- fetch/programmer-humour/style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css index e69de29bb..393e74d15 100644 --- a/fetch/programmer-humour/style.css +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,15 @@ +body { + background-color: #e0f5f5; + font-family: sans-serif; + text-align: center; + padding: 2rem; +} + +h1 { + color: #1a6b6b; + font-size: 3rem; +} + +/* img { + margin: 0 auto; +} */ \ No newline at end of file