From d94d6cb7a3f0df340702368905aa9a6efc14dc9a Mon Sep 17 00:00:00 2001 From: AbdihamidAli Date: Mon, 6 May 2024 01:58:06 +0100 Subject: [PATCH] complete code --- programmer-humour/index.html | 18 ++++++++++++++++++ programmer-humour/script.js | 31 +++++++++++++++++++++++++++++++ programmer-humour/styles.css | 15 +++++++++++++++ 3 files changed, 64 insertions(+) create mode 100644 programmer-humour/index.html create mode 100644 programmer-humour/script.js create mode 100644 programmer-humour/styles.css diff --git a/programmer-humour/index.html b/programmer-humour/index.html new file mode 100644 index 00000000..69d5294a --- /dev/null +++ b/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + + + Abdi Comic Web + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/programmer-humour/script.js b/programmer-humour/script.js new file mode 100644 index 00000000..0544fd87 --- /dev/null +++ b/programmer-humour/script.js @@ -0,0 +1,31 @@ +// Function to fetch latest xkcd comic +async function fetchComicData() { + 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(); + return data; + } catch (error) { + console.error(error); + return null; + } +} + +// Function to render comic image to DOM +async function displayComic() { + const container = document.getElementById('comic-container'); + const comicData = await fetchComicData(); + if (comicData && comicData.img) { + const img = document.createElement('img'); + img.src = comicData.img; + img.alt = comicData.alt; + container.appendChild(img); + } else { + container.textContent = 'Failed to load comic.'; + } +} + +// Call displayComic function when the page loads +displayComic(); diff --git a/programmer-humour/styles.css b/programmer-humour/styles.css new file mode 100644 index 00000000..acdfb66c --- /dev/null +++ b/programmer-humour/styles.css @@ -0,0 +1,15 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f2f2f2; +} + +img { + max-width: 100%; + height: auto; +} \ No newline at end of file