From 6771155991fda7c2c537c79d72e325074a1d7414 Mon Sep 17 00:00:00 2001 From: Pedro Ricciardi Date: Thu, 15 Feb 2024 09:12:17 +0000 Subject: [PATCH 1/7] layout done --- programmer-humour/index.html | 36 +++++++++++++ programmer-humour/script.js | 6 +++ programmer-humour/styles.css | 100 +++++++++++++++++++++++++++++++++++ 3 files changed, 142 insertions(+) create mode 100644 programmer-humour/index.html create mode 100644 programmer-humour/script.js create mode 100644 programmer-humour/styles.css diff --git a/programmer-humour/index.html b/programmer-humour/index.html new file mode 100644 index 00000000..dae4fbd3 --- /dev/null +++ b/programmer-humour/index.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + xkcd webcomic + + + +
+

xkcd

+

Webcomic

+
+
+

Comic of the day

+ +

From xkcd.com

+

+
+ + + + + + \ No newline at end of file diff --git a/programmer-humour/script.js b/programmer-humour/script.js new file mode 100644 index 00000000..6de8fbc5 --- /dev/null +++ b/programmer-humour/script.js @@ -0,0 +1,6 @@ +const api = https://xkcd.now.sh/?comic=latest + +document.addEventListener('DOMContentLoaded', function () { + fetchComic(api); + makePageForEpisodes(); +}); \ No newline at end of file diff --git a/programmer-humour/styles.css b/programmer-humour/styles.css new file mode 100644 index 00000000..1721b6be --- /dev/null +++ b/programmer-humour/styles.css @@ -0,0 +1,100 @@ +:root { + --page-width: 50vw; + --primary-colour: #3a7bd5; + --secondary-colour: #362db3; + --text-colour-dark: #333; + --text-colour-light: #ffffff; + --background-colour: #f0ebd5; + --foreground-colour: #fff; + --font-family: "Comic Neue", cursive; + --border-radius: 0.25rem; + --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); +} + +body, main, header, footer, div { + box-sizing: border-box; +} + +h1, h2, h3, p, a { + margin: 0; + padding: 0; +} + +a, a:active, a:visited { + text-decoration: none; + color: var(--secondary-colour); +} + +a:hover { + font-weight: 700; +} + +body { + margin: 0; + background-color: var(--background-colour); + font-family: var(--font-family); + + height: 100vh; + + display: grid; + grid-template-rows: auto 1fr auto; +} + +header, main, footer { + width: var(--page-width); + margin: 0 auto; +} + +h1 { + font-size: 5rem; + line-height: 4rem; + margin: 0; + color: var(--primary-colour); +} + +h2 { + font-size: 2.5rem; +} + +header { + background-color: var(--foreground-colour); + padding: 1rem 2rem; +} + +main { + background-color: var(--primary-colour); + text-align: center; + padding: 2rem; + + color: var(--text-colour-light); + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +main a, main a:active, main a:visited { + color: var(--text-colour-light); + text-decoration: underline; +} + +img { + padding: 1rem; + background-color: var(--foreground-colour); + border-radius: var(--border-radius); + margin: 1rem 0 0.5rem; +} + +footer { + background-color: var(--foreground-colour); + padding: 0.5rem 1rem; + text-align: center; + + color: var(--text-colour-dark); + font-weight: 300; +} + +footer a{ + color: var(--secondary-colour); +} \ No newline at end of file From 0f785838121b6e9a0594785f5b5dd10f198c7777 Mon Sep 17 00:00:00 2001 From: Pedro Ricciardi Date: Thu, 15 Feb 2024 09:22:58 +0000 Subject: [PATCH 2/7] fetch and render implemented --- programmer-humour/script.js | 31 ++++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/programmer-humour/script.js b/programmer-humour/script.js index 6de8fbc5..fe389255 100644 --- a/programmer-humour/script.js +++ b/programmer-humour/script.js @@ -1,6 +1,31 @@ -const api = https://xkcd.now.sh/?comic=latest +const api = "https://xkcd.now.sh/?comic=latest" +let lastComic document.addEventListener('DOMContentLoaded', function () { fetchComic(api); - makePageForEpisodes(); -}); \ No newline at end of file +}); + +function fetchComic(api) { + fetch(api) + .then((response) => response.json()) + .then((data) => lastComic = data) + .then(() => renderPage(lastComic)) + .catch((error) => console.log(error)); +} + +function renderPage(data) { + console.log(data); + const root = document.querySelector("#root") + const html = htmlGenerator(data.title, data.img, data.alt); + + // root.innerHTML = html; +} + +function htmlGenerator(title, imageUrl, imageAlt) { + let html = `

${title}

+ ${imageAlt} +

From xkcd.com

+

` + + return html +} \ No newline at end of file From c65d7b534ea90f0a6d1a3e2d8339e147016cec22 Mon Sep 17 00:00:00 2001 From: Pedro Ricciardi Date: Thu, 15 Feb 2024 09:24:19 +0000 Subject: [PATCH 3/7] background colour changed --- programmer-humour/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/programmer-humour/styles.css b/programmer-humour/styles.css index 1721b6be..83aa11bc 100644 --- a/programmer-humour/styles.css +++ b/programmer-humour/styles.css @@ -4,7 +4,7 @@ --secondary-colour: #362db3; --text-colour-dark: #333; --text-colour-light: #ffffff; - --background-colour: #f0ebd5; + --background-colour: #798b9b; --foreground-colour: #fff; --font-family: "Comic Neue", cursive; --border-radius: 0.25rem; From c308a120045273a2524c3b67a9e72ad531c0bc53 Mon Sep 17 00:00:00 2001 From: Pedro Ricciardi Date: Thu, 15 Feb 2024 09:28:53 +0000 Subject: [PATCH 4/7] show error to the user --- programmer-humour/script.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/programmer-humour/script.js b/programmer-humour/script.js index fe389255..ae408567 100644 --- a/programmer-humour/script.js +++ b/programmer-humour/script.js @@ -28,4 +28,10 @@ function htmlGenerator(title, imageUrl, imageAlt) {

` return html +} + +function showError(error) { + console.log(error); + const root = document.querySelector("#root") + root.innerHTML = `

${error}

` } \ No newline at end of file From 8e5d8e5e185759938a7aee253e7241c5c5db7e27 Mon Sep 17 00:00:00 2001 From: Pedro Ricciardi Date: Thu, 15 Feb 2024 09:30:53 +0000 Subject: [PATCH 5/7] added noopener and noreferrer --- programmer-humour/index.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/programmer-humour/index.html b/programmer-humour/index.html index dae4fbd3..e16d2256 100644 --- a/programmer-humour/index.html +++ b/programmer-humour/index.html @@ -20,13 +20,15 @@

xkcd

Comic of the day

-

From xkcd.com

+

From xkcd.com

From ca09cc9816fb76a9ce13c96978a2f7638266b6ad Mon Sep 17 00:00:00 2001 From: Pedro Ricciardi Date: Thu, 15 Feb 2024 09:34:47 +0000 Subject: [PATCH 6/7] html root element content deleted to receive the fetched data --- programmer-humour/index.html | 5 +---- programmer-humour/script.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/programmer-humour/index.html b/programmer-humour/index.html index e16d2256..24ef71fa 100644 --- a/programmer-humour/index.html +++ b/programmer-humour/index.html @@ -18,10 +18,7 @@

xkcd

Webcomic

-

Comic of the day

- -

From xkcd.com

-

+