From b0740b4f1c0970aceb6629cda98ef6f4bcaba721 Mon Sep 17 00:00:00 2001 From: Droid-An Date: Mon, 14 Apr 2025 18:17:34 +0100 Subject: [PATCH 1/6] WIP --- fetch/programmer-humour/fetch.js | 13 +++++++++++++ fetch/programmer-humour/index.html | 13 +++++++++++++ fetch/programmer-humour/styles.css | 0 3 files changed, 26 insertions(+) create mode 100644 fetch/programmer-humour/fetch.js create mode 100644 fetch/programmer-humour/index.html create mode 100644 fetch/programmer-humour/styles.css diff --git a/fetch/programmer-humour/fetch.js b/fetch/programmer-humour/fetch.js new file mode 100644 index 00000000..7a52c6c8 --- /dev/null +++ b/fetch/programmer-humour/fetch.js @@ -0,0 +1,13 @@ +"use strict" +const img = document.querySelector(img) + +const fetchData = async () => { + const response = await fetch("https://xkcd.now.sh/?comic=latest"); + const data = await response.json() + return data +} +fetchData().then((data) => { + console.log(data.img) + img.setAttribute("src", data.img) + +}); \ No newline at end of file diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..eef2c67d --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,13 @@ + + + + + + humour + + + + + + + \ No newline at end of file diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css new file mode 100644 index 00000000..e69de29b From 3f74981a5603aff15a20ae30016759f5604cb2e0 Mon Sep 17 00:00:00 2001 From: Droid-An Date: Mon, 14 Apr 2025 21:22:40 +0100 Subject: [PATCH 2/6] rendered image on page --- fetch/programmer-humour/fetch.js | 2 +- fetch/programmer-humour/index.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/fetch/programmer-humour/fetch.js b/fetch/programmer-humour/fetch.js index 7a52c6c8..0c3ceaea 100644 --- a/fetch/programmer-humour/fetch.js +++ b/fetch/programmer-humour/fetch.js @@ -1,5 +1,5 @@ "use strict" -const img = document.querySelector(img) +const img = document.querySelector("img"); const fetchData = async () => { const response = await fetch("https://xkcd.now.sh/?comic=latest"); diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index eef2c67d..1e018f23 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -5,9 +5,9 @@ humour + - - + \ No newline at end of file From 723dbfddafdb7f9e6f73b594b7720ddd833b9d4c Mon Sep 17 00:00:00 2001 From: Droid-An Date: Tue, 15 Apr 2025 14:20:46 +0100 Subject: [PATCH 3/6] added styles and errors catch --- fetch/programmer-humour/fetch.js | 14 +++++++++----- fetch/programmer-humour/index.html | 3 ++- fetch/programmer-humour/styles.css | 11 +++++++++++ 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/fetch/programmer-humour/fetch.js b/fetch/programmer-humour/fetch.js index 0c3ceaea..38b83409 100644 --- a/fetch/programmer-humour/fetch.js +++ b/fetch/programmer-humour/fetch.js @@ -1,13 +1,17 @@ "use strict" const img = document.querySelector("img"); +const errorMessage = document.querySelector("#errorMessage") const fetchData = async () => { - const response = await fetch("https://xkcd.now.sh/?comic=latest"); - const data = await response.json() - return data + try { + const response = await fetch("https://xkcd.now.sh/?comic=latest"); + const data = await response.json() + return data + } catch (error) { + errorMessage.style.display = `contents`; + errorMessage.textContent = error; +} } fetchData().then((data) => { - console.log(data.img) img.setAttribute("src", data.img) - }); \ No newline at end of file diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 1e018f23..7fc8e8ed 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -4,10 +4,11 @@ humour - + +
\ No newline at end of file diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css index e69de29b..6f884ddc 100644 --- a/fetch/programmer-humour/styles.css +++ b/fetch/programmer-humour/styles.css @@ -0,0 +1,11 @@ +body { + display: flex; + justify-content: center; + align-items: center; +} +img { + margin: auto; + margin-top: 30vh; + + +} \ No newline at end of file From 96c04452552c5b70089d9613c989f67eac09be32 Mon Sep 17 00:00:00 2001 From: Droid-An Date: Tue, 15 Apr 2025 14:23:36 +0100 Subject: [PATCH 4/6] added ; --- fetch/programmer-humour/fetch.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/fetch/programmer-humour/fetch.js b/fetch/programmer-humour/fetch.js index 38b83409..7e1a0646 100644 --- a/fetch/programmer-humour/fetch.js +++ b/fetch/programmer-humour/fetch.js @@ -1,17 +1,17 @@ "use strict" const img = document.querySelector("img"); -const errorMessage = document.querySelector("#errorMessage") +const errorMessage = document.querySelector("#errorMessage"); const fetchData = async () => { try { const response = await fetch("https://xkcd.now.sh/?comic=latest"); - const data = await response.json() - return data + const data = await response.json(); + return data; } catch (error) { errorMessage.style.display = `contents`; errorMessage.textContent = error; } } fetchData().then((data) => { - img.setAttribute("src", data.img) + img.setAttribute("src", data.img); }); \ No newline at end of file From 6c15a28612e7055344f8af496f71644420ed3c3d Mon Sep 17 00:00:00 2001 From: Droid-An Date: Tue, 15 Apr 2025 14:44:15 +0100 Subject: [PATCH 5/6] formatted documents --- fetch/programmer-humour/fetch.js | 24 ++++++++++++------------ fetch/programmer-humour/index.html | 22 +++++++++++----------- fetch/programmer-humour/styles.css | 14 ++++++-------- 3 files changed, 29 insertions(+), 31 deletions(-) diff --git a/fetch/programmer-humour/fetch.js b/fetch/programmer-humour/fetch.js index 7e1a0646..e4bc4de0 100644 --- a/fetch/programmer-humour/fetch.js +++ b/fetch/programmer-humour/fetch.js @@ -1,17 +1,17 @@ -"use strict" +"use strict"; const img = document.querySelector("img"); const errorMessage = document.querySelector("#errorMessage"); const fetchData = async () => { - try { - const response = await fetch("https://xkcd.now.sh/?comic=latest"); - const data = await response.json(); - return data; - } catch (error) { - errorMessage.style.display = `contents`; - errorMessage.textContent = error; -} -} + try { + const response = await fetch("https://xkcd.now.sh/?comic=latest"); + const data = await response.json(); + return data; + } catch (error) { + errorMessage.style.display = `contents`; + errorMessage.textContent = error; + } +}; fetchData().then((data) => { - img.setAttribute("src", data.img); -}); \ No newline at end of file + img.setAttribute("src", data.img); +}); diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 7fc8e8ed..642f115a 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -1,14 +1,14 @@ - - - + + + humour - - - - -
- - - \ No newline at end of file + + + + +
+ + + diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css index 6f884ddc..a42ab0ae 100644 --- a/fetch/programmer-humour/styles.css +++ b/fetch/programmer-humour/styles.css @@ -1,11 +1,9 @@ body { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } img { - margin: auto; - margin-top: 30vh; - - -} \ No newline at end of file + margin: auto; + margin-top: 30vh; +} From 8fb68331ab6eb0cf162c068641c049c4f2c42746 Mon Sep 17 00:00:00 2001 From: Droid-An Date: Wed, 23 Apr 2025 15:33:43 +0100 Subject: [PATCH 6/6] made changes according to the feedback --- fetch/programmer-humour/fetch.js | 4 ++-- fetch/programmer-humour/index.html | 2 +- fetch/programmer-humour/styles.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/fetch/programmer-humour/fetch.js b/fetch/programmer-humour/fetch.js index e4bc4de0..4b0a297d 100644 --- a/fetch/programmer-humour/fetch.js +++ b/fetch/programmer-humour/fetch.js @@ -1,5 +1,5 @@ "use strict"; -const img = document.querySelector("img"); +const imgElem = document.querySelector("img"); const errorMessage = document.querySelector("#errorMessage"); const fetchData = async () => { @@ -13,5 +13,5 @@ const fetchData = async () => { } }; fetchData().then((data) => { - img.setAttribute("src", data.img); + imgElem.setAttribute("src", data.img); }); diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html index 642f115a..5eced904 100644 --- a/fetch/programmer-humour/index.html +++ b/fetch/programmer-humour/index.html @@ -9,6 +9,6 @@
- + diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css index a42ab0ae..dfe73aae 100644 --- a/fetch/programmer-humour/styles.css +++ b/fetch/programmer-humour/styles.css @@ -3,7 +3,7 @@ body { justify-content: center; align-items: center; } -img { +#funnyPicture { margin: auto; margin-top: 30vh; }