diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..10ea25c7 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + + Programmer Humour + + + +
+

Latest XKCD Comic

+ +
+
+ + + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..eeef24ef --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,29 @@ +const btn = document.getElementById("getComicBtn"); +const container = document.getElementById("comicContainer"); + +async function getLatestComic() { + try { + const response = await fetch("https://xkcd.now.sh/?comic=latest"); + if (!response.ok) throw new Error("Network response was not ok"); + + const data = await response.json(); + console.log(data); // log received JSON + + // Clear previous comic + container.innerHTML = ""; + + // Create image element + const img = document.createElement("img"); + img.src = data.img; + img.alt = data.title; + + container.appendChild(img); + + } catch (error) { + console.error("Failed to fetch comic:", error); + container.textContent = "Failed to load comic. Please try again later."; + } +} + +// Event listener +btn.addEventListener("click", getLatestComic); diff --git a/fetch/programmer-humour/style.js b/fetch/programmer-humour/style.js new file mode 100644 index 00000000..ece17084 --- /dev/null +++ b/fetch/programmer-humour/style.js @@ -0,0 +1,16 @@ +// css/style.css +/* Style for XKCD Comic Fetcher */ + +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 2rem; +} + +#comicContainer img { + max-width: 100%; + height: auto; + margin-top: 1rem; + border: 2px solid #333; + border-radius: 5px;; +}