From fc61b22aa662ee3ad7cc6054a10c44ff8e1061d9 Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Wed, 13 Aug 2025 20:44:49 +0200 Subject: [PATCH 1/4] Create html file to build programmer humour app --- fetch/index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 fetch/index.html diff --git a/fetch/index.html b/fetch/index.html new file mode 100644 index 00000000..6425f6e9 --- /dev/null +++ b/fetch/index.html @@ -0,0 +1,14 @@ + + + + + + XKCD Latest Comic + + + +

Latest XKCD Comic

+
+ + + \ No newline at end of file From 09948b4a6725a9df430777a98684808c1ff7984a Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Wed, 13 Aug 2025 20:45:40 +0200 Subject: [PATCH 2/4] created function to make an API call --- fetch/script.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 fetch/script.js diff --git a/fetch/script.js b/fetch/script.js new file mode 100644 index 00000000..6475a69b --- /dev/null +++ b/fetch/script.js @@ -0,0 +1,35 @@ +async function fetchLatestXKCD() { + const apiEndpoint = 'https://xkcd.now.sh/?comic=latest'; + + try { + const response = await fetch(apiEndpoint); + if (!response.ok) { + throw new Error(`Fetching error! Status: ${response.status}`); + } + + const data = await response.json(); + console.log('Received data:', data); + + if (data.img) { + const imgElement = document.createElement('img'); + imgElement.src = data.img; + imgElement.alt = data.alt || 'XKCD Comic'; + + const container = document.getElementById('image-container'); + container.innerHTML = ''; + container.appendChild(imgElement); + } else { + console.warn('No "img" property found in the data.'); + } + + } catch (error) { + console.error('Error fetching data:', error); + const errorMsg = document.createElement('div'); + errorMsg.className = 'error'; + errorMsg.textContent = `Error fetching data: ${error.message}`; + document.body.appendChild(errorMsg); + } + } + + fetchLatestXKCD(); + From 78a9f4aef399077ade246cf0c5bf7948f7c6cb9f Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Wed, 13 Aug 2025 20:46:04 +0200 Subject: [PATCH 3/4] Added some styling to the app --- fetch/style.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 fetch/style.css diff --git a/fetch/style.css b/fetch/style.css new file mode 100644 index 00000000..c3bf6dff --- /dev/null +++ b/fetch/style.css @@ -0,0 +1,41 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f2f5; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + margin: 0; + padding: 20px; + } + + h1 { + color: #333; + } + + #image-container { + margin-top: 20px; + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + } + + #image-container img { + max-width: 300px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + transition: transform 0.2s, box-shadow 0.2s; + } + + #image-container img:hover { + transform: scale(1.05); + box-shadow: 0 8px 20px rgba(0,0,0,0.3); + } + + .error { + color: red; + font-weight: bold; + margin-top: 20px; + } \ No newline at end of file From 9d4ec8c775713951005eb9e40cd898c712d944cf Mon Sep 17 00:00:00 2001 From: halimatou-saddiyaa Date: Wed, 20 Aug 2025 16:16:30 +0200 Subject: [PATCH 4/4] Modified code to prevent unnecessary scrolling --- fetch/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/fetch/style.css b/fetch/style.css index c3bf6dff..27959358 100644 --- a/fetch/style.css +++ b/fetch/style.css @@ -5,9 +5,10 @@ body { flex-direction: column; align-items: center; justify-content: center; - min-height: 100vh; + min-height: 100dvh; margin: 0; padding: 20px; + box-sizing: border-box; } h1 {