From 98ef41108eeafb52e92a9e86741c9cc8783cb4e6 Mon Sep 17 00:00:00 2001 From: Ebrahim_Moqbel Date: Fri, 18 Sep 2026 01:30:43 +0100 Subject: [PATCH] fetched the data and rendered the images to the html file with some style --- fetch/programmer-humour/index.html | 14 ++++++++++++++ fetch/programmer-humour/script.js | 28 ++++++++++++++++++++++++++++ fetch/programmer-humour/style.css | 15 +++++++++++++++ 3 files changed, 57 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..a16281acb --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,14 @@ + + + + + + + Programmer humour + + + +

+ + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..e1d37cd93 --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,28 @@ +// get the json using Fetch +const endPoint = "https://xkcd.now.sh/?comic=latest"; +async function fetchComic() { + const response = await fetch(endPoint); + // incorporating handling error + if (!response.ok) { + throw new Error(`request failed: ${response.status}`); + } + return await response.json(); +} + +async function setup() { + try { + const data = await fetchComic(); + console.log(data); + + const comicImage = document.getElementById("comic"); + comicImage.src = data.img; + comicImage.title = data.title; + comicImage.alt = data.alt; + } catch (error) { + console.error(error); + document.getElementById("error-message").textContent = + "Sorry, something went wrong loading the comic. Please try again later."; + } +} + +window.onload = setup; diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 000000000..5aa23a59a --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,15 @@ +body { + font-family: sans-serif; + text-align: center; + padding: 40px; +} + +#comic { + max-width: 90%; + border: 1px solid #ccc; + margin-top: 20px; +} + +#error-message { + color: red; +} \ No newline at end of file