diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 000000000..1f3286a03 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,16 @@ + + + + + XKCD Comic + + + +
+

+ +

+
+ + + \ No newline at end of file diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..5356d5ed1 --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,21 @@ +const title = document.getElementById("title"); +const image = document.getElementById("image"); +const alt = document.getElementById("alt"); + +async function getImg() { + const url = "https://xkcd.now.sh/?comic=latest"; + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Response status: ${response.status}`); + } + const result = await response.json(); + title.textContent = result.safe_title; + image.src = result.img; + alt.textContent = result.alt; + console.log(result); + } catch (error) { + console.log(error.message); + } +} +getImg(); diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 000000000..69fc21b8a --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,9 @@ +#comic { + text-align: center; + max-width: 800px; + margin: 0 auto; +} + +#image { + max-width: 100%; +} \ No newline at end of file