From f40338217d1557382036fe8c988640c2dfc9a7e8 Mon Sep 17 00:00:00 2001 From: Alejandro Gaerste Date: Thu, 12 May 2022 12:53:47 +0200 Subject: [PATCH 01/34] ad package json and .gitignore --- .gitignore | 2 ++ package.json | 24 ++++++++++++++++++++++++ {data => src/data}/comments.json | 0 {data => src/data}/db.json | 0 {data => src/data}/posts.json | 0 {data => src/data}/users.json | 0 6 files changed, 26 insertions(+) create mode 100644 .gitignore create mode 100644 package.json rename {data => src/data}/comments.json (100%) rename {data => src/data}/db.json (100%) rename {data => src/data}/posts.json (100%) rename {data => src/data}/users.json (100%) diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..25c8fdba --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +package-lock.json \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..c551184d --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "blog-with-api", + "version": "1.0.0", + "description": "`#html` `#css` `#js` `#dom` `#JSON` `#HTTP` `#API` `#Bootstrap` `#master-in-software-development`", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "server":"json-server --watch ./src/data/db.json" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Gaerste/blog-with-api.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/Gaerste/blog-with-api/issues" + }, + "homepage": "https://github.com/Gaerste/blog-with-api#readme", + "dependencies": { + "json-server": "^0.17.0" + } +} diff --git a/data/comments.json b/src/data/comments.json similarity index 100% rename from data/comments.json rename to src/data/comments.json diff --git a/data/db.json b/src/data/db.json similarity index 100% rename from data/db.json rename to src/data/db.json diff --git a/data/posts.json b/src/data/posts.json similarity index 100% rename from data/posts.json rename to src/data/posts.json diff --git a/data/users.json b/src/data/users.json similarity index 100% rename from data/users.json rename to src/data/users.json From 8046cc37398c3f9f724ac742988a630ebcb0af5e Mon Sep 17 00:00:00 2001 From: Alejandro Gaerste Date: Thu, 12 May 2022 15:29:39 +0200 Subject: [PATCH 02/34] feature(structure html and the dialog) --- index.html | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..d043ce75 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + Blog + + + +
+

My blog

 +
+ +
+
+ + + +
+
+ +

+ + +
+
+

Some text in the modal.

+
+
+ +
+ + From 6ad69e8718d9e1d386f61869aa1e8ed124683ef0 Mon Sep 17 00:00:00 2001 From: Alejandro Gaerste Date: Thu, 12 May 2022 16:37:30 +0200 Subject: [PATCH 03/34] feature(add the folder structure) --- index.html | 16 +++++++++++++--- src/css/style.css | 19 +++++++++++++++++++ src/js/comments-modal.js | 0 src/js/info-modal.js | 0 src/js/main.js | 0 5 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 src/css/style.css create mode 100644 src/js/comments-modal.js create mode 100644 src/js/info-modal.js create mode 100644 src/js/main.js diff --git a/index.html b/index.html index d043ce75..4e3eca11 100644 --- a/index.html +++ b/index.html @@ -4,22 +4,24 @@ + + Blog -
+

My blog
-
+
- +

+
+
diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 00000000..2004f8cd --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,19 @@ +*{ + background-color: aquamarine; + margin: 0; + padding: 0; + font-style: none; +} +.blog__header{ + border: 1px solid black; + height: 12vh; + width: 80vw; + margin: 20px; +} +.main__content{ + border: 1px solid rgb(246, 4, 4); + height: 80vh; + width: 80vw; + margin: 20px; + +} \ No newline at end of file diff --git a/src/js/comments-modal.js b/src/js/comments-modal.js new file mode 100644 index 00000000..e69de29b diff --git a/src/js/info-modal.js b/src/js/info-modal.js new file mode 100644 index 00000000..e69de29b diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 00000000..e69de29b From 97a014ed185169b3d8deaec9f5f22d6c36aaf807 Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Thu, 12 May 2022 17:30:12 +0200 Subject: [PATCH 04/34] feature(added fetchPosts() and displayPosts() in main) --- package.json | 2 +- src/css/style.css | 2 +- src/js/main.js | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c551184d..e9d17b0d 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "server":"json-server --watch ./src/data/db.json" + "server": "json-server --watch ./src/data/db.json" }, "repository": { "type": "git", diff --git a/src/css/style.css b/src/css/style.css index 2004f8cd..1ab37711 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -15,5 +15,5 @@ height: 80vh; width: 80vw; margin: 20px; - + overflow: hidden; } \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index e69de29b..1d62835f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,40 @@ + + +// Fetch posts from api for posts, return as .json data, and pass to displayPosts function. +function getPostData () { + const fetchPosts = fetch('http://localhost:3000/posts'); + fetchPosts + .then(response => { + return response.json(); + }) + .then(data => { + displayPosts(data); + }) +} + +// Loads the blog posts when site is opened. +window.onload = getPostData(); + +// Shows the blog posts with title and body on the main page +function displayPosts(data) { + const dataContainer = document.getElementById('postDisplay'); + + data.map((post) => { + + const postContainer = document.createElement('div'); + const blogTitle = document.createElement('h3'); + const blogPost = document.createElement('p'); + + postContainer.classList.add('post__container'); + blogTitle.classList.add('post__title') + blogPost.classList.add('post__blog--post'); + blogTitle.textContent = post.title; + blogPost.textContent = post.body; + + postContainer.append(blogTitle, blogPost); + dataContainer.append(postContainer); + }) +} + + + From d967c029d2f9627efca26469c9d588bb1754c8ab Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Fri, 13 May 2022 10:28:02 +0200 Subject: [PATCH 05/34] Add links for bootstrap and temporary title --- index.html | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 4e3eca11..2067c386 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,21 @@ + - Blog + The Dispatch -
-

My blog

 +
+

The Dispatch
-
+
+ +
@@ -42,5 +45,7 @@

+ + From 4747ac27b8b2143e0e093cc786f5f377c1c57cbf Mon Sep 17 00:00:00 2001 From: Alejandro Gaerste Date: Fri, 13 May 2022 10:29:07 +0200 Subject: [PATCH 06/34] feature(add links botstrap) --- index.html | 15 +++++++++++++-- src/css/style.css | 5 ----- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 4e3eca11..1d241d6f 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,13 @@ - + + Blog @@ -15,7 +21,7 @@
-
+
@@ -42,5 +48,10 @@

+ diff --git a/src/css/style.css b/src/css/style.css index 1ab37711..e067cce2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -6,14 +6,9 @@ } .blog__header{ border: 1px solid black; - height: 12vh; - width: 80vw; margin: 20px; } .main__content{ border: 1px solid rgb(246, 4, 4); - height: 80vh; - width: 80vw; - margin: 20px; overflow: hidden; } \ No newline at end of file From 3f1331cc3d75e7efd7922db5088a41be97c7f5d8 Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Fri, 13 May 2022 10:42:03 +0200 Subject: [PATCH 07/34] Initial commit add style with bootstrap to main --- index.html | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 93a11248..b43624f6 100644 --- a/index.html +++ b/index.html @@ -4,19 +4,14 @@ - - + + The Dispatch -
+

The Dispatch
@@ -50,10 +45,7 @@

- + + From 0e5467beb3e6c07d56925b2ae45a2b08c7b3dc9e Mon Sep 17 00:00:00 2001 From: Alejandro Gaerste Date: Fri, 13 May 2022 13:04:16 +0200 Subject: [PATCH 08/34] feature(add the modal whit bootstrap and header fixed) --- index.html | 79 ++++++++++++++++++++++++++++++-------------- src/css/style.css | 11 +++--- src/js/info-modal.js | 7 ++++ src/js/main.js | 57 +++++++++++++++----------------- 4 files changed, 96 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index 93a11248..2187d8d1 100644 --- a/index.html +++ b/index.html @@ -10,43 +10,74 @@ integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> + + + The Dispatch -
-

The Dispatch

 +
+

The Dispatch
-
+
- + -
-
- -

- - -
-
-

Some text in the modal.

-
-
- -
-
+
diff --git a/src/css/style.css b/src/css/style.css index e067cce2..6e558441 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,14 +1,17 @@ *{ - background-color: aquamarine; margin: 0; padding: 0; font-style: none; } +.blog__header--title{ + text-decoration: none; + color: black; +} .blog__header{ - border: 1px solid black; - margin: 20px; + background-color: #817d7d; + text-align: center; } .main__content{ - border: 1px solid rgb(246, 4, 4); + background-color: #f2ddc3; overflow: hidden; } \ No newline at end of file diff --git a/src/js/info-modal.js b/src/js/info-modal.js index e69de29b..3614a3ea 100644 --- a/src/js/info-modal.js +++ b/src/js/info-modal.js @@ -0,0 +1,7 @@ +//modal display in the main content +function openPost() { + const modalOpen = new bootstrap.Modal(document.getElementById("modal")); + modalOpen.show(); + console.log(modalOpen); +} +export { openPost }; diff --git a/src/js/main.js b/src/js/main.js index 1d62835f..4563cc43 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,15 +1,15 @@ - +import { openPost } from "./info-modal.js"; // Fetch posts from api for posts, return as .json data, and pass to displayPosts function. -function getPostData () { - const fetchPosts = fetch('http://localhost:3000/posts'); - fetchPosts - .then(response => { - return response.json(); - }) - .then(data => { - displayPosts(data); - }) +function getPostData() { + const fetchPosts = fetch("http://localhost:3000/posts"); + fetchPosts + .then((response) => { + return response.json(); + }) + .then((data) => { + displayPosts(data); + }); } // Loads the blog posts when site is opened. @@ -17,24 +17,21 @@ window.onload = getPostData(); // Shows the blog posts with title and body on the main page function displayPosts(data) { - const dataContainer = document.getElementById('postDisplay'); - - data.map((post) => { - - const postContainer = document.createElement('div'); - const blogTitle = document.createElement('h3'); - const blogPost = document.createElement('p'); - - postContainer.classList.add('post__container'); - blogTitle.classList.add('post__title') - blogPost.classList.add('post__blog--post'); - blogTitle.textContent = post.title; - blogPost.textContent = post.body; - - postContainer.append(blogTitle, blogPost); - dataContainer.append(postContainer); - }) + const dataContainer = document.getElementById("postDisplay"); + + data.map((post) => { + const postContainer = document.createElement("div"); + const blogTitle = document.createElement("h3"); + const blogPost = document.createElement("p"); + + postContainer.classList.add("post__container", "shadow-sm", "p-3", "mb-5", "bg-body", "rounded", "container-xxl"); + blogTitle.classList.add("post__title"); + blogPost.classList.add("post__blog--post"); + blogTitle.textContent = post.title; + blogPost.textContent = post.body; + + postContainer.append(blogTitle, blogPost); + dataContainer.append(postContainer); + postContainer.addEventListener("click", openPost); + }); } - - - From 50f41b4a43fe194e1d5934b451701faf72e7b125 Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Fri, 13 May 2022 13:15:20 +0200 Subject: [PATCH 09/34] Changes to main style, possible conflicts with feature-style-modal on main --- index.html | 9 ++++++--- src/css/style.css | 10 ++++++---- src/js/main.js | 2 +- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index b43624f6..0c1555ff 100644 --- a/index.html +++ b/index.html @@ -11,11 +11,14 @@ -
-

The Dispatch

 +
+ +

The Dispatch

 + +
-
+
diff --git a/src/css/style.css b/src/css/style.css index e067cce2..c6de85cb 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,14 +1,16 @@ *{ - background-color: aquamarine; margin: 0; padding: 0; font-style: none; } -.blog__header{ - border: 1px solid black; - margin: 20px; + +:root { + --bg-custom: #f2ddc3; } + + .main__content{ border: 1px solid rgb(246, 4, 4); overflow: hidden; + background-color: var(--bg-custom); } \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 1d62835f..d1ad55a4 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -25,7 +25,7 @@ function displayPosts(data) { const blogTitle = document.createElement('h3'); const blogPost = document.createElement('p'); - postContainer.classList.add('post__container'); + postContainer.classList.add('post__container', 'container', 'col-8', 'bg-light', 'shadow-sm', 'p-3', 'mb-5', 'rounded'); blogTitle.classList.add('post__title') blogPost.classList.add('post__blog--post'); blogTitle.textContent = post.title; From 1d280d35ebedef7783b688aedfcfcb1d4963e9d2 Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Fri, 13 May 2022 13:19:42 +0200 Subject: [PATCH 10/34] Changes from feature-style-modal adopted during merge from feature-style-main 2 --- index.html | 27 --------------------------- src/js/main.js | 12 ------------ 2 files changed, 39 deletions(-) diff --git a/index.html b/index.html index dbfb6eec..276f5b65 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,13 @@ -<<<<<<< HEAD - - - - - -======= ->>>>>>> feature-style-main The Dispatch -<<<<<<< HEAD
-======= -
- -

The Dispatch

 - - -
- -
->>>>>>> feature-style-main
diff --git a/src/js/main.js b/src/js/main.js index 2b1e47d8..4563cc43 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -30,20 +30,8 @@ function displayPosts(data) { blogTitle.textContent = post.title; blogPost.textContent = post.body; -<<<<<<< HEAD postContainer.append(blogTitle, blogPost); dataContainer.append(postContainer); postContainer.addEventListener("click", openPost); }); -======= - postContainer.classList.add('post__container', 'container', 'col-8', 'bg-light', 'shadow-sm', 'p-3', 'mb-5', 'rounded'); - blogTitle.classList.add('post__title') - blogPost.classList.add('post__blog--post'); - blogTitle.textContent = post.title; - blogPost.textContent = post.body; - - postContainer.append(blogTitle, blogPost); - dataContainer.append(postContainer); - }) ->>>>>>> feature-style-main } From 9d1f869919b2ab97c94df6191d86e25909462368 Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Fri, 13 May 2022 14:36:49 +0200 Subject: [PATCH 11/34] Add to main: flex, wrap, spacing, color changes --- index.html | 6 +++--- src/css/style.css | 20 ++++++++++---------- src/js/main.js | 2 +- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 276f5b65..c47c89ac 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,13 @@
-

The Dispatch

 +

The Dispatch
-
+
diff --git a/src/css/style.css b/src/css/style.css index 92148d0b..d7b5c259 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -3,24 +3,24 @@ padding: 0; font-style: none; } -<<<<<<< HEAD + +:root { + --bg-custom: #f2ddc3; + --bg-header-custom: #ebba7e; +} + .blog__header--title{ text-decoration: none; - color: black; } + .blog__header{ - background-color: #817d7d; + background-color: var(--bg-header-custom); text-align: center; -======= - -:root { - --bg-custom: #f2ddc3; ->>>>>>> feature-style-main } -.main__content{ - background-color: #f2ddc3; + +.main__content { overflow: hidden; background-color: var(--bg-custom); } \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 4563cc43..49fda11d 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -24,7 +24,7 @@ function displayPosts(data) { const blogTitle = document.createElement("h3"); const blogPost = document.createElement("p"); - postContainer.classList.add("post__container", "shadow-sm", "p-3", "mb-5", "bg-body", "rounded", "container-xxl"); + postContainer.classList.add("post__container", "shadow-sm", "mx-1", "col-3", "p-3", "mb-5", "bg-body", "rounded", "container-xxl"); blogTitle.classList.add("post__title"); blogPost.classList.add("post__blog--post"); blogTitle.textContent = post.title; From 73e51ddc1ee6fec5a580f922a6f387684fd91ec6 Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Fri, 13 May 2022 14:58:50 +0200 Subject: [PATCH 12/34] Feature: Add modal to html, email and username --- index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c47c89ac..8a3a8939 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
-
+
@@ -29,7 +29,7 @@
+
Username
+

username

+
Email
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, inventore repellendus doloribus voluptates molestiae From fa645a37baabe9a24d91ae3f6d57805e85085a19 Mon Sep 17 00:00:00 2001 From: Alejandro Gaerste Date: Fri, 13 May 2022 17:52:34 +0200 Subject: [PATCH 13/34] feature: add showTitleBody & showUserEmail in the modal --- index.html | 15 +-------------- src/js/comments-modal.js | 0 src/js/info-modal.js | 36 ++++++++++++++++++++++++++++++++++-- src/js/main.js | 28 +++++++++++++++++++++++++--- 4 files changed, 60 insertions(+), 19 deletions(-) delete mode 100644 src/js/comments-modal.js diff --git a/index.html b/index.html index 8a3a8939..e8b5c66b 100644 --- a/index.html +++ b/index.html @@ -42,20 +42,7 @@

Username

username

Email
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Tempore, inventore repellendus doloribus voluptates molestiae - maxime maiores consectetur ad repellat amet sequi fuga - blanditiis accusantium expedita eos veniam! Tempora, quod - laudantium! Lorem ipsum dolor sit amet consectetur adipisicing - elit. Tempore, inventore repellendus doloribus voluptates - molestiae maxime maiores consectetur ad repellat amet sequi fuga - blanditiis accusantium expedita eos veniam! Tempora, quod - laudantium! Lorem ipsum dolor sit amet consectetur adipisicing - elit. Tempore, inventore repellendus doloribus voluptates - molestiae maxime maiores consectetur ad repellat amet sequi fuga - blanditiis accusantium expedita eos veniam! Tempora, quod - laudantium! +

diff --git a/src/css/style.css b/src/css/style.css index d7b5c259..20e2236b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,3 +1,6 @@ +/* fonts */ +@import url('https://fonts.googleapis.com/css2?family=Diplomata+SC&family=Tinos&display=swap'); + *{ margin: 0; padding: 0; @@ -8,7 +11,9 @@ --bg-custom: #f2ddc3; --bg-header-custom: #ebba7e; } - +.main__title{ + font-family: 'Diplomata SC', cursive; +} .blog__header--title{ text-decoration: none; } From 23c51a91149aaa7f88e91a6d5c77286372e22ffd Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Sun, 15 May 2022 18:50:13 +0200 Subject: [PATCH 16/34] Add possible .svgs. Add color scheme to main, background transparency, icon, search bar, and nav to header --- .vscode/settings.json | 23 ++ assets/icons8-bugle-100.png | Bin 0 -> 1781 bytes assets/icons8-bugle-50.png | Bin 0 -> 863 bytes assets/undraw_content_re_33px.svg | 121 ++++++++ assets/undraw_news_re_6uub.svg | 1 + assets/undraw_newspaper_re_syf5 bw.svg | 296 ++++++++++++++++++++ assets/undraw_sharing_articles_re_jnkp.svg | 1 + assets/undraw_the_world_is_mine_re_j5cr.svg | 1 + index.html | 53 +++- src/css/style.css | 35 ++- src/js/main.js | 3 +- 11 files changed, 514 insertions(+), 20 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 assets/icons8-bugle-100.png create mode 100644 assets/icons8-bugle-50.png create mode 100644 assets/undraw_content_re_33px.svg create mode 100644 assets/undraw_news_re_6uub.svg create mode 100644 assets/undraw_newspaper_re_syf5 bw.svg create mode 100644 assets/undraw_sharing_articles_re_jnkp.svg create mode 100644 assets/undraw_the_world_is_mine_re_j5cr.svg diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f4f9b25c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,23 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#13321b", + "activityBar.activeBorder": "#6446b9", + "activityBar.background": "#13321b", + "activityBar.foreground": "#e7e7e7", + "activityBar.inactiveForeground": "#e7e7e799", + "activityBarBadge.background": "#6446b9", + "activityBarBadge.foreground": "#e7e7e7", + "sash.hoverBorder": "#13321b", + "statusBar.background": "#050d07", + "statusBar.foreground": "#e7e7e7", + "statusBarItem.hoverBackground": "#13321b", + "statusBarItem.remoteBackground": "#050d07", + "statusBarItem.remoteForeground": "#e7e7e7", + "titleBar.activeBackground": "#050d07", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#050d0799", + "titleBar.inactiveForeground": "#e7e7e799" + }, + "peacock.color": "#050d07", + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/icons8-bugle-100.png b/assets/icons8-bugle-100.png new file mode 100644 index 0000000000000000000000000000000000000000..fb156e3a4a9b3c6d4da4f6b4fd8c06d74c973d6e GIT binary patch literal 1781 zcmV=5USyrmIG7i{}Uy%J7)~i=i3#`R2Mtd+Si0{2&f@H*G z;2=@wFU17Ogkyom2~uGm!FBo*1?eV81(^l35q0>d zKutj&6Qn{+0a}PUdkZjFM1u6~0vFnq!(Lz+G9oXRi0vv4i_lJ0K}G}i0Xu-rz-r(t-~(iM5CX@~ zz9*#E@ubuOZ+q;thYiSz*(_iJFcf)#_BIkVS;dYgp+E4U$3`2{=1%H#^?M$j7Np#; z8rcG4L`ft_=w8+mqKh)dVG;=vvX}LE`q$L0as00bhLeyjD89SBz~~Hh-cQJWB+V>jl$*69(+FPz;}iHw z;}rzp3gBbpozj&5e{w>jFDs+>d-BXip0=zVmu5JK?BDH^&~JEblub3TQyCqu@{B>I zAavntktc8>vOT6Vv!$J3prn7W87jUEc|T=IUlngH!&VOI22TLKS80QR&waXpdvdVn&^MGLYgfXxla@Zd9bydGGNjJrw_LXe|WyjjIZsknZEvOsqp zLI?uVJDm!=r;ZOtn)13*20{pOK*jalSFhq*0+d-Udc*U!fVP`~Yk(E%__@HdrA`hZ zh`zh}2e6qox?BEpVEe7eyK}8NJ_i{b#}Y!2T`I2I%AG2%@6IeZOU1Pyx@pnPa1xr3 z{agC!TY~iRyo3;By^5cv;`(Bf^v%pJ0&IBJj$*{KTx@QgCt zh&v{kL;Nq{R4VKz{+pLkxC?0WI^&EYjHCE!X)uQ1UW~6tH5%E`sGEhfLkrSoH^kJx z26rlbJLwE`%TSO%8>zu?xjkuY0)N-+p{3u)>jBf=E>thiF)S7ZiOFBN1?7W<<5AV1l0asKZx zq_O?+1 literal 0 HcmV?d00001 diff --git a/assets/icons8-bugle-50.png b/assets/icons8-bugle-50.png new file mode 100644 index 0000000000000000000000000000000000000000..c34bfb7869e5de38d0bf9eb30ccb565c02fa82cd GIT binary patch literal 863 zcmV-l1EBngP)Qpi=c=H4;E3hB8Z@%qD7+~^dKI@gJ99(OGRjV2(`3n+LD;{F#qhcyV-p* zn~m89o-YiOnfcE=zuz-EFHfkbsHmu@s4&=X0X?z@A7X94h4jKBs70FWvz8?@ijxW> zwf@Rk8t3CXN&Gujv5{9K;fHXMRcd6HB>D_)in>*2|_~R6$Q#p^OLqUo3e>j^MTx z7F))GHFCAZO-$mNK8P)&Ze&8U*e_ZF*Wj0Ed$6JYdb}-N70$?;&D?Yvzv4CAm}_Kn zh(8&oT6c&Y5qJOtQMU^-%PhVu?brEyD_hr1JRgBCM0s17n8nK&v$PMJ;TU(eji`&U zUD~-$MBQ=R-e#O^BOgWJ{ZW1|%FlJLy@_=(&h#RpHsR~2Ka0Ct+Ov&(8-e3d{xizG zUS&pNoPRPz4dN}u`q`e*X94>o@Qx^-j`9WFsBXj780TQ7r~!Ns?T2w`W1lq{4?Gh2 zNK5&$Ou?Pl7Wq$+&mXGOZDL7+AH&aBk2f0|bBz2I`IgAPkNn|`zMUA7uIBJ@q}&qm$58Dl*e zu}5{WM&P#y-WlcHdOt@FDrR9wv5DN7p=Us`lXYcer{WD<5p`qOC!Or`8$el_!teMD zk1N*1fb@H>;YWEtci13ZndW!0Y(9-nhZGC7S4Qx@;yl?>9=?EE@wfC5md!A}iHFWe z_pI@#&t)C1#l3i4@lUp6xTPC0y|PwX;Io$J4mBs;6fR#$6OD}GCFu;9ZX>W$nv^b| ppW_+l-X}ptMMXtLMMcGO@*kW!pjay()$afR002ovPDHLkV1hs?o*)1K literal 0 HcmV?d00001 diff --git a/assets/undraw_content_re_33px.svg b/assets/undraw_content_re_33px.svg new file mode 100644 index 00000000..d4e79045 --- /dev/null +++ b/assets/undraw_content_re_33px.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/undraw_news_re_6uub.svg b/assets/undraw_news_re_6uub.svg new file mode 100644 index 00000000..9aadc410 --- /dev/null +++ b/assets/undraw_news_re_6uub.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/undraw_newspaper_re_syf5 bw.svg b/assets/undraw_newspaper_re_syf5 bw.svg new file mode 100644 index 00000000..6eb3c97c --- /dev/null +++ b/assets/undraw_newspaper_re_syf5 bw.svg @@ -0,0 +1,296 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/undraw_sharing_articles_re_jnkp.svg b/assets/undraw_sharing_articles_re_jnkp.svg new file mode 100644 index 00000000..4b77d1ae --- /dev/null +++ b/assets/undraw_sharing_articles_re_jnkp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/undraw_the_world_is_mine_re_j5cr.svg b/assets/undraw_the_world_is_mine_re_j5cr.svg new file mode 100644 index 00000000..cf99bae7 --- /dev/null +++ b/assets/undraw_the_world_is_mine_re_j5cr.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index e8b5c66b..7d225560 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,46 @@ -
-

The Dispatch

 -
+ -
-
+
+
- +
Username
@@ -46,7 +69,7 @@
Email

+
+
diff --git a/src/css/style.css b/src/css/style.css index df197621..ba937f21 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -52,6 +52,10 @@ font-family: 'Newsreader', serif; } +.modal { + font-family: 'Newsreader', serif; +} + .modal__dialog { background-color: hsla(0, 0%, 100%, .25); } diff --git a/src/js/info-modal.js b/src/js/info-modal.js index c70cd133..f2c42c58 100644 --- a/src/js/info-modal.js +++ b/src/js/info-modal.js @@ -1,8 +1,14 @@ +import { getComments } from './main.js' + //modal display in the main content function openPost() { const modalOpen = new bootstrap.Modal(document.getElementById("modal")); + const commentsBtn = document.getElementById('commentsContentBtn'); modalOpen.show(); + removeComments(); + commentsBtn.addEventListener('click', loadComments); } + //show the content of body and title function showTitleBody(event) { const postId = event.target.getAttribute("data-post-id"); @@ -10,6 +16,7 @@ function showTitleBody(event) { const modalBody = document.getElementById("modalText"); const postData = fetch("http://localhost:3000/posts"); + postData .then((response) => { return response.json(); @@ -19,6 +26,7 @@ function showTitleBody(event) { modalTitle.textContent = obj.title; modalBody.textContent = obj.body; }); + setCommentsId(postId) } function showUserEmail(event) { const userId = event.target.getAttribute("data-user-id"); @@ -35,5 +43,49 @@ function showUserEmail(event) { modalEmail.textContent = obj.email; }); } + +function setCommentsId(postId) { + const commentsContent = document.getElementById('commentsContentBody'); + commentsContent.setAttribute('data-post-id', `${postId}`); +} + +function removeComments () { + const commentsBody = document.getElementById('commentsContentBody'); + while (commentsBody.firstElementChild) { + console.log(commentsBody) + commentsBody.removeChild(commentsBody.lastElementChild); + } +} + +async function loadComments () { + const commentsContent = document.getElementById('commentsContentBody'); + const commentsTitle = document.createElement('h4'); + commentsTitle.textContent = 'Comments:'; + commentsTitle.classList.add('fw-bold') + + const modalPostId = parseInt(commentsContent.getAttribute('data-post-id')); // read the attribute for which comments + const commentsData = await getComments(); + const commentsSet = commentsData.filter(comment => { + return comment.postId == modalPostId; + }) + removeComments(); + commentsContent.append(commentsTitle) + commentsSet.map((comment) => { + const commentName = document.createElement('h5'); + const email = document.createElement('p'); + const body = document.createElement('p'); + commentName.textContent = comment.name; + + email.textContent = comment.email; + body.textContent = comment.body; + body.classList.add('border-bottom', 'pb-3'); + + commentsContent.append(commentName, email, body); + }) + +}; + + + //EXPORT export { openPost, showTitleBody, showUserEmail }; diff --git a/src/js/main.js b/src/js/main.js index bae64e59..6b5a0c54 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,15 +1,30 @@ import { openPost, showTitleBody, showUserEmail } from "./info-modal.js"; + // Fetch posts from api for posts, return as .json data, and pass to displayPosts function. function getPostData() { const fetchPosts = fetch("http://localhost:3000/posts"); - fetchPosts + try { + fetchPosts .then((response) => { return response.json(); }) .then((data) => { displayPosts(data); }); + } catch(error) { + console.log(error) + } +} + +async function getComments () { + try { + const response = await fetch('http://localhost:3000/comments'); + const commentsData = await response.json(); + return commentsData; + } catch(error) { + console.log(error); + } } // Loads the blog posts when site is opened. @@ -56,3 +71,6 @@ function displayPosts(data) { }); }); } + + +export { getComments }; \ No newline at end of file From ab262207c40b234bda69b9807b03f0018305e687 Mon Sep 17 00:00:00 2001 From: blakejohns5 <100588924+blakejohns5@users.noreply.github.com> Date: Mon, 16 May 2022 14:35:20 +0200 Subject: [PATCH 21/34] Fix style on brand initials and icon, left side header --- index.html | 8 ++++---- src/css/style.css | 10 +++------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 4a84a747..eeba6757 100644 --- a/index.html +++ b/index.html @@ -11,14 +11,14 @@ -
-
+
@@ -32,7 +32,7 @@