From 7c792ba4b115b3122f23b47e495bc9c6952a510e Mon Sep 17 00:00:00 2001 From: gai93003 Date: Sat, 4 Jan 2025 15:31:26 +0000 Subject: [PATCH 1/3] This is the styles document for the project --- fetch/programmer-humour/styles.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 fetch/programmer-humour/styles.css diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css new file mode 100644 index 0000000..ff2fae1 --- /dev/null +++ b/fetch/programmer-humour/styles.css @@ -0,0 +1,22 @@ +* { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} + +#container { + background: rgb(172, 170, 170); + width: 60%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px; + margin: 50px auto; + border-radius: 5px; +} + +h1 { + margin-bottom: 2rem; +} \ No newline at end of file From 011deaacdc5d4453da347c38ca55c40bd0b0f125 Mon Sep 17 00:00:00 2001 From: gai93003 Date: Sun, 5 Jan 2025 01:44:09 +0000 Subject: [PATCH 2/3] This is the html document for the project --- fetch/programmer-humour/index.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 fetch/programmer-humour/index.html diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 0000000..ac7c3cf --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,16 @@ + + + + + + Programming Humour + + + + +
+

+ +
+ + \ No newline at end of file From 7ed5becc8c59201465ed10459b80454783486bb0 Mon Sep 17 00:00:00 2001 From: gai93003 Date: Sun, 5 Jan 2025 01:44:51 +0000 Subject: [PATCH 3/3] This js file contains the api url and the async function to fetch the data. --- fetch/programmer-humour/script.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 fetch/programmer-humour/script.js diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 0000000..ca30e0f --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,23 @@ +const apiUrl = 'https://xkcd.now.sh/?comic=latest'; + +async function programmerHumour () { + const response = await fetch(apiUrl); + let data = await response.json(); + + + const container = document.getElementById('container'); + + const h1 = document.getElementById('title'); + h1.textContent = data.title; + + const image = document.getElementById('image'); + image.src = data.img; + + container.appendChild(h1); + container.appendChild(image); + console.log(data); +} + + + +programmerHumour(); \ No newline at end of file