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

Programmer Humour

+
+
+ + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..85a86ddc --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,25 @@ +async function getComic() { + try { + // Fetch the latest comic from the API + const response = await fetch("https://xkcd.now.sh/?comic=latest"); + // Convert the response to JSON + const data = await response.json(); + // Log the data to the console + console.log(data); + + // Grab the comic container from the DOM + let comicDiv = document.getElementById("comic"); + // Create an img element + let imgComic = document.createElement("img"); + // Set the src of the img to the comic image URL + imgComic.src = data.img; + // Append the img to the comic container + comicDiv.appendChild(imgComic); + } catch (error) { + // Catch and log any errors + console.log(error); + } +} + +// Call the function +getComic(); diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css new file mode 100644 index 00000000..cca30f59 --- /dev/null +++ b/fetch/programmer-humour/styles.css @@ -0,0 +1,34 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #0d0d0d; + color: #00d4cc; + font-family: "Courier New", monospace; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + gap: 24px; +} + +h1 { + color: #ff2d55; + font-size: 3rem; + text-transform: uppercase; + letter-spacing: 4px; +} + +#comic img { + border: 3px solid #00d4cc; + border-radius: 8px; + box-shadow: 0 0 20px #00d4cc66; + max-width: 600px; +}